jQuery文本段落展开和折叠效果

知秋~

已于 2022-06-14 13:42:30 修改

阅读量1.9k

点赞数 1

文章标签： jquery javascript html

于 2018-01-04 14:43:56 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/78970822

版权

<!DOCTYPE html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>jQuery文本段落展开和折叠效果</title>
   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
   <style>
       html,
       body,
       div,
       h2,
       p {
           margin: 0;
           padding: 0;
       }

       html {
           font: 1em Arial, Helvetica, sans-serif;
           color: #444;
       }

       a {
           color: #0087f1;
       }

       p {
           margin-bottom: 5px;
       }

       #container {
           margin: 0 auto;
           width: 600px;
       }

       #container h2 {
           font-size: 20px;
           color: #0087f1;
       }

       #wrap {
           position: relative;
           padding: 10px;
           overflow: hidden;
       }

       #gradient {
           width: 100%;
           height: 35px;
           background: url() repeat-x;
           position: absolute;
           bottom: 0;
           left: 0;
       }

       #read-more {
           padding: 5px;
           border-top: 4px double #ddd;
           background: #fff;
           color: #333;
       }

       #read-more a {
           padding-right: 22px;
           background: url() no-repeat 100% 50%;
           font-weight: bold;
           text-decoration: none;
       }

       #read-more a: hover {
           color: #000;
       }
   </style>

   <script type="text/javascript">
       $(function() {
           var slideHeight = 75; // px
           var defHeight = $('#wrap').height();
           if (defHeight >= slideHeight) {
               $('#wrap').css('height', slideHeight + 'px');
               $('#read-more').append('<a href="#">点击查看更多。。</a>');
               $('#read-more a').click(function() {
                   var curHeight = $('#wrap').height();
                   if (curHeight == slideHeight) {
                       $('#wrap').animate({
                           height: defHeight
                       }, "normal");
                       $('#read-more a').html('点击隐藏');
                       $('#gradient').fadeOut();
                   } else {
                       $('#wrap').animate({
                           height: slideHeight
                       }, "normal");
                       $('#read-more a').html('点击查看更多。。');
                       $('#gradient').fadeIn();
                   }
                   return false;
               });
           }
       });
   </script>
</head>
<body>
   <div id="container">
       <h1>jQuery 控制段落文字展开折叠，点击查看更多的功能</h1>
       <div id="wrap">
           <div>
               <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
               </p>
           </div>
           <div id="gradient"></div>
       </div>
       <div id="read-more"></div>
   </div>
</body>
</html>