jquery는 text_jquery 단락의 확장 및 접기 효과를 제어하기 위해 더 많은 콘텐츠를 보려면 클릭을 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery는 text_jquery 단락의 확장 및 접기 효과를 제어하기 위해 더 많은 콘텐츠를 보려면 클릭을 구현합니다.

May 24, 2018 pm 03:53 PM

jquery 펼치기접기 딸깍 하는 소리

이 기사의 예에서는 단락 텍스트의 확장 및 접기 효과를 제어하기 위해 더 많은 콘텐츠를 보기 위해 클릭하는 jquery의 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

여기서는 jQuery를 사용하여 텍스트 확장 및 접기 효과를 구현합니다. 텍스트를 클릭하면 텍스트 내용이 완전히 표시됩니다. 필요하지 않은 경우 텍스트가 표시되도록 합니다. 를 다시 클릭하면 콘텐츠가 축소됩니다. 즉, 콘텐츠의 일부가 숨겨집니다. 많은 대형 웹사이트에서 사용되는 더 많은 기능을 보려면 클릭하세요. 예를 들어, 일부 영화 소개와 제품 소개는 페이지 레이아웃 효과를 위해 기본적으로 숨겨져 있는 경우가 있습니다.

작동 효과는 아래 그림과 같습니다.

구체 코드는 다음과 같습니다.

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;jQuery文本段落展开和折叠效果&lt;/title&gt;
&lt;style&gt;
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;}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.6.2.min.js?7.1.34&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function(){
 var slideHeight = 75; // px
 var defHeight = $(&#39;#wrap&#39;).height();
 if(defHeight &gt;= slideHeight){
  $(&#39;#wrap&#39;).css(&#39;height&#39; , slideHeight + &#39;px&#39;);
  $(&#39;#read-more&#39;).append(&#39;&lt;a href=&quot;#&quot;&gt;点击查看更多。。&lt;/a&gt;&#39;);
  $(&#39;#read-more a&#39;).click(function(){
   var curHeight = $(&#39;#wrap&#39;).height();
   if(curHeight == slideHeight){
    $(&#39;#wrap&#39;).animate({
     height: defHeight
    }, &quot;normal&quot;);
    $(&#39;#read-more a&#39;).html(&#39;点击隐藏&#39;);
    $(&#39;#gradient&#39;).fadeOut();
   }else{
    $(&#39;#wrap&#39;).animate({
     height: slideHeight
    }, &quot;normal&quot;);
    $(&#39;#read-more a&#39;).html(&#39;点击查看更多。。&#39;);
    $(&#39;#gradient&#39;).fadeIn();
   }
   return false;
  });  
 }
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id=&quot;container&quot;&gt;
  &lt;h1&gt;jQuery 控制段落文字展开折叠，点击查看更多的功能&lt;/h1&gt;
  &lt;h2&gt;About Billabong&lt;/h2&gt;
  &lt;p id=&quot;wrap&quot;&gt;
   &lt;p&gt;
    &lt;p&gt;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.&lt;/p&gt;
    &lt;p&gt;Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.&lt;/p&gt;
   &lt;/p&gt;
   &lt;p id=&quot;gradient&quot;&gt;&lt;/p&gt;
  &lt;/p&gt;
  &lt;p id=&quot;read-more&quot;&gt;&lt;/p&gt;
 &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.