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>
  • 相关阅读:
    今日总结
    今日总结
    每日总结
    每日总结
    小程序之navigator跳转方式
    vue面试题(上)
    ES6 中的 set 用法
    维信小程序 如何 实现下拉刷新?
    微信小程序的相关文件类型有哪些??
    vue中v-if与v-show的区别以及使用场景
  • 原文地址:https://www.cnblogs.com/tlweb/p/5984983.html
Copyright © 2011-2022 走看看