jQuery多余文字折叠效果

CSS代码

 1 .morecon{ 
 2     cursor:pointer;
 3     font-size:14px; float: left;
 4     margin: 5px 10px 0 0;
 5     color: #0096FF;
 6 }
 7 .checkmore .text{
 8     width: 100px;
 9     overflow: hidden;
10 }

HTML代码

1 <div class="checkmore">
2     <div class="text">
3         <p>我是爱德华，来自美国旧金山，会英语，德语，法语，毕业于加你福尼亚大学；
4             我是爱德华，来自美国旧金山我是爱德华，来自美国旧金山，会英语，德语，法语，毕业于加你福尼亚大学；
5         </p>
6     </div>
7 </div>

JS代码

 1 <script src="static/js/jquery-3.1.1.min.js"></script>
 2 <script type="text/javascript">
 3     $(document).ready( function() {
 4         $(".checkmore .text").each(function(){
 5             height=$(this).height();
 6             if(height>88) {
 7                 $(this).css("height","88");
 8                 $(this).after("<a class=\"morecon\" >查看更多</a>");
 9             }
10         });
11         $(".morecon").click(function(){
12             $(this).parent().children(".text").css("height","auto");
13             $(this).css("display","none");
14         });
15     });
16 </script>

 

posted @ 2016-10-21 16:08  Angel冰然  阅读(2595)  评论(0)  编辑  收藏  举报