查看所有和收起

                                    

点击后效果：

首先给出html的内容:

<div class="comment-content">

  <div class="history-comment">
     <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>

.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;}

重点部门是标红的。

开始设置一个固定的死高度超过他的都隐藏了。 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条评论");}
})