这是鼠标放上展开全文的代码，怎么改可以变成鼠标点击才展开，再点击收起？

tsh888 2017-02-21 08:53:52

 <!DOCTYPE html>

            <html>

              <head>

                <meta charset="gb2312">

                <title></title>

                <style>

                   .h{

                     transition: all 3s ease;

                     overflow: hidden;

                   }

                   .h20{

                      height: 20px;

                   }

            

                   .h20:hover{

                      height: 100%;

                   }

                </style>

              </head>

              <body>

                <div class="h h20">1撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡</div>

              

                              <div class="h h20">2一一王一一一 一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一一一王一一一</div>

的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷的发家史丢了饭卡就是；地方；啊技术的；浪费了坷

              </body>

            </html>

这是鼠标放上展开全文的代码，怎么改可以变成鼠标点击才展开，再点击收起？
谢谢！

...全文

253 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

jac-song 2017-02-22

打赏
举报

使用jQuery的toggleClass方法，轻松实现此功能


$(function () {
 $(".h").on("click", function () {
            $(".h").toggleClass("h20");
        })
});

记得使用前要引入jQuery包

看着是个昵称 2017-02-22

打赏
举报

使用js来使用点击事件

点击按钮时展开，文本铺满后收起，全程无js代码，不获取dom元素实现这个过程。毫无疑问需要有一个总体的容器包裹以下元素：text内容，按钮由于纯css实现，则需要利用input的checkbox + label for来实现点击按钮的...

首先我们画出基本的内容，我们需要一个标题的部分然后是一个展开的按钮，这里简化为一个加号html>更多产品+然后我们设置一下根据屏幕大小显示几张图片：/*屏幕像素大于1024时*/@mediascreenand(min-width:1024px)...

1、循环列表，点击展开，再次点击关闭 html部分 <view class="listMain"> <view class="list" wx:for="{{list}}" wx:key="index"> <view class="title">{{item.title}}</view> <view...

收起的样式很简单，用的技术工具也就是CSS和JavaScript两个，掌握好CSS布局，JavaScript技术就可以了。下面我们来看看表格的页面布局，源代码的样式吧！源代码的样式很简单，给它盒子，再用table表格样式来布局，...

问题这个是渲染到4级的导航菜单，只截取...下面是改了之后的，使用后端给的接口中，改为用来区分层级或者是编码的那个字段，这样就可以有区别的情况下，index能正确区分，并且解决这个问题。代码如下： <!--

CSS

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章