zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    go学习中的零散笔记
    git reset --hard与git reset --soft的区别
    php必学必会
    gdb 解core
    php学习
    高仿京东到家APP引导页炫酷动画效果
    RxHttp
    SVN回滚文件
    遍历枚举
    python3 多线程
  • 原文地址:https://www.cnblogs.com/tlweb/p/5984983.html
Copyright © 2011-2022 走看看