jquery implémente cliquez pour afficher plus de contenu afin de contrôler l'effet d'expansion et de pliage du paragraphe text

jquery implémente cliquez pour afficher plus de contenu afin de contrôler l'effet d'expansion et de pliage du paragraphe text_jquery

不言

Libérer： 2018-05-24 15:53:27

original

30215 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation par jquery du clic pour afficher plus de contenu afin de contrôler l'effet d'expansion et de pliage du texte du paragraphe. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ici, nous utilisons jQuery pour implémenter l'effet d'expansion et de pliage du texte. Après avoir cliqué sur le texte, le contenu du texte sera affiché complètement. Contrôlez le paragraphe pour afficher le texte lorsqu'il n'est pas nécessaire. , vous pouvez cliquer à nouveau pour réduire le contenu, c'est-à-dire qu'une partie du contenu est masquée. Cliquez pour voir plus de fonctions sont utilisées dans de nombreux grands sites Web. Par exemple, certaines introductions de films et de produits sont parfois masquées par défaut pour l'effet de mise en page de la page.

L'effet de l'opération est illustré dans la figure ci-dessous :

Le code spécifique est le suivant :

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

Copier après la connexion