查看所有和收起
来源:互联网 发布:stc89c51单片机简介 编辑:程序博客网 时间:2024/05/16 07:51
点击后效果:
首先给出html的内容:
<div class="comment-content">
<div class="history-comment">
<ul>
<ul>
<!--默认展示三条-->
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
<!--默认展示三条-->
<!--剩下的所有-->
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
</ul>
</div>
<div class="open"><span>展开全部66条评论</span><img src="images/icon/s_arrow2.png"/></div>
</div>
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
<!--默认展示三条-->
<!--剩下的所有-->
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
<li>
<span class="name">姓名 </span><span class="time">2017-8-17 12:00</span>
<div>实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!实在太棒啦!</div>
</li>
</ul>
</div>
<div class="open"><span>展开全部66条评论</span><img src="images/icon/s_arrow2.png"/></div>
</div>
.comment-content .input input{padding:12px 15px;border-radius:5px;border:1px solid #dadada;width:800px;font-size:14px;padding-left:95px}
.comment-content .input span{position:absolute;left:15px;top: 10px;font-size:14px;}
.comment-content .input button{position:absolute;right:-1px;top:0;background-color:#33B3EE;color:#fff;height:42px;line-height:40px;width:80px;text-align: center;border:1px solid #33B3EE;border-radius:0 5px 5px 0;cursor:pointer;}
.comment-content .history-comment{font-size:14px;color:#666;padding:5px 20px;border:1px solid #dadada;border-radius:5px;margin-top:10px;height: 195px;overflow: hidden;}
/*查看所有评论内容*/
.comment-content .history-comment.show{height:auto;}
.comment-content .history-comment li{border-bottom:1px dotted #dadada;padding:15px 0px;}
.comment-content .history-comment li:last-child{border:none;}
.comment-content .history-comment .name{color:#333;}
.open{text-align: center;font-size:14px;color:#666;}
.open img{margin-left:5px;margin-top:20px;}
.comment-content .input span{position:absolute;left:15px;top: 10px;font-size:14px;}
.comment-content .input button{position:absolute;right:-1px;top:0;background-color:#33B3EE;color:#fff;height:42px;line-height:40px;width:80px;text-align: center;border:1px solid #33B3EE;border-radius:0 5px 5px 0;cursor:pointer;}
.comment-content .history-comment{font-size:14px;color:#666;padding:5px 20px;border:1px solid #dadada;border-radius:5px;margin-top:10px;height: 195px;overflow: hidden;}
/*查看所有评论内容*/
.comment-content .history-comment.show{height:auto;}
.comment-content .history-comment li{border-bottom:1px dotted #dadada;padding:15px 0px;}
.comment-content .history-comment li:last-child{border:none;}
.comment-content .history-comment .name{color:#333;}
.open{text-align: center;font-size:14px;color:#666;}
.open img{margin-left:5px;margin-top:20px;}
重点部门是标红的。
开始设置一个固定的死高度超过他的都隐藏了。height: 195px;overflow: hidden;
然后点击查看更多的时候,再把高度设置成自动 height:auto;
js
//展开所有评论
$(".open").click(function(){
$(".history-comment").toggleClass("show");
if($(".history-comment").hasClass("show")){$(".open span").text("收起");}
else{$(".open span").text("展开全部66条评论");}
})
$(".open").click(function(){
$(".history-comment").toggleClass("show");
if($(".history-comment").hasClass("show")){$(".open span").text("收起");}
else{$(".open span").text("展开全部66条评论");}
})
阅读全文
0 0
- 查看所有和收起
- 查看更多和收起的js
- 类似qq发说说的查看全文和收起
- 点击背景收起所有键盘
- 显示更多和收起
- “全文”和“收起”实现
- 键盘弹出和收起
- webView 收起和展开
- TextView展开和收起
- javascript查看详情与收起详情
- RecyclerView实现查看更多及收起
- linux里查看所有用户和用户组
- Oracle中查看所有表和字段
- 查看局域网内所有ip 和 mac
- Oracle中查看所有表和字段
- oracle 查看 所有表 和 字段
- linux里查看所有用户和用户组
- Oracle查看所有表和字段
- 023-公平感|领导者的内功
- MFC的模块状态概念
- 怎么搭建微信小程序的本地测试服务器
- SP二次开发邮件发送
- Hadoop集群搭建
- 查看所有和收起
- Android中添加并设置文字字体
- Windows系统字符集及各种字符转换函数(长期填坑)
- Qt中基本数据类型
- 等待与希望,.NET Core 的发展壮大
- 小明带你看WWDC 2017(day3实况)
- 小明带你看WWDC 2017(day4实况)
- 小明带你看WWDC 2017(day2实况)
- vuejs+ts+webpack2框架的项目实践