jquery实现点击查看更多内容控制段落文字展开折叠效果

前端技术 2023/09/06 JavaScript

本文实例讲述了jquery实现点击查看更多内容控制段落文字展开折叠效果。分享给大家供大家参考。具体如下：

这里使用jQuery实现的文字展开折叠效果，点击文字后文字内容会完整的显示出来，控制段落来显示文字，不需要的时候，可以再次点击后将内容折叠起来，也就是隐藏了一部分内容。点击查看更多的功能，在很多大网站都有在用，像一些电影简介、产品介绍有时候为了页面的布局效果，常常默认是隐藏了一部分，用户想看的时候可以点击后展开。

运行效果如下图所示：

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>jQuery文本段落展开和折叠效果</title>
<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\" src=\"jquery-1.6.2.min.js\"></script>
<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>
  <h2>About Billabong</h2>
  <div id=\"wrap\">
   <div>
    <p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
    <p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>
   </div>
   <div id=\"gradient\"></div>
  </div>
  <div id=\"read-more\"></div>
 </div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15963

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案