jquery melaksanakan klik untuk melihat lebih banyak kandungan untuk mengawal pengembangan dan kesan lipatan perenggan text

jquery melaksanakan klik untuk melihat lebih banyak kandungan untuk mengawal pengembangan dan kesan lipatan perenggan text_jquery

不言

Lepaskan： 2018-05-24 15:53:27

asal

30254 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan klikan jquery untuk melihat lebih banyak kandungan untuk mengawal pengembangan dan kesan lipatan teks perenggan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kami menggunakan jQuery untuk melaksanakan pengembangan teks dan kesan lipatan Selepas mengklik pada teks, kandungan teks akan dipaparkan sepenuhnya untuk memaparkan teks , anda boleh mengklik sekali lagi untuk meruntuhkan kandungan Maksudnya, sebahagian daripada kandungan itu tersembunyi. Klik untuk melihat lebih banyak fungsi digunakan dalam banyak tapak web yang besar Contohnya, beberapa pengenalan filem dan pengenalan produk kadangkala disembunyikan secara lalai untuk kesan reka letak halaman Pengguna boleh mengklik untuk mengembangkan apabila mereka mahu melihatnya.

Kesan operasi ditunjukkan dalam rajah di bawah:

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk