jquery implements click to view more content to control the expansion and folding effect of paragraph text

Home

Web Front-end

JS Tutorial

jquery implements click to view more content to control the expansion and folding effect of paragraph text_jquery

不言

May 24, 2018 pm 03:53 PM

jqueryExpandCollapseClick

The example in this article describes jquery's implementation of clicking to view more content to control the expansion and folding effect of paragraph text. Share it with everyone for your reference. The details are as follows:

Here we use jQuery to implement the text expansion and folding effect. After clicking on the text, the text content will be displayed completely. Control the paragraph to display the text. When not needed, you can click again to collapse the content. That is to say, part of the content is hidden. Click to see more functions are used in many large websites. For example, some movie introductions and product introductions are sometimes hidden by default for the layout effect of the page. Users can click to expand when they want to see it.

The operation effect is shown in the figure below:

The specific code is as follows:

<!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 id="jQuery-nbsp-控制段落文字展开折叠-点击查看更多的功能">jQuery 控制段落文字展开折叠，点击查看更多的功能</h1>
  <h2 id="About-nbsp-Billabong">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>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn