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

首页

web前端

js教程

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

不言

May 24, 2018 pm 03:53 PM

jquery展开折叠点击

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

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

运行效果如下图所示：

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本段落展开和折叠效果</title>
<style>
html,body,p,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?7.1.34"></script>
<script type="text/javascript">
$(function(){
 var slideHeight = 75; // px
 var defHeight = $(&#39;#wrap&#39;).height();
 if(defHeight >= slideHeight){
  $(&#39;#wrap&#39;).css(&#39;height&#39; , slideHeight + &#39;px&#39;);
  $(&#39;#read-more&#39;).append(&#39;<a href="#">点击查看更多。。</a>&#39;);
  $(&#39;#read-more a&#39;).click(function(){
   var curHeight = $(&#39;#wrap&#39;).height();
   if(curHeight == slideHeight){
    $(&#39;#wrap&#39;).animate({
     height: defHeight
    }, "normal");
    $(&#39;#read-more a&#39;).html(&#39;点击隐藏&#39;);
    $(&#39;#gradient&#39;).fadeOut();
   }else{
    $(&#39;#wrap&#39;).animate({
     height: slideHeight
    }, "normal");
    $(&#39;#read-more a&#39;).html(&#39;点击查看更多。。&#39;);
    $(&#39;#gradient&#39;).fadeIn();
   }
   return false;
  });  
 }
});
</script>
</head>
<body>
 <p id="container">
  <h1>jQuery 控制段落文字展开折叠，点击查看更多的功能</h1>
  <h2>About Billabong</h2>
  <p id="wrap">
   <p>
    <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>
   </p>
   <p id="gradient"></p>
  </p>
  <p id="read-more"></p>
 </p>
</body>
</html>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn