jquery texte cacher cliquez pour en afficher plus

Avec le développement de la technologie Internet, l'expérience utilisateur des sites Web fait l'objet de plus en plus d'attention. Dans la conception de sites Web, la manière de mieux afficher le contenu et d'améliorer l'expérience de lecture des utilisateurs est devenue un sujet important.

Pour un contenu de page plus long, afin d'éviter que la page ne soit trop longue, nous utilisons généralement des méthodes de pliage de texte ou de clic sur plus, afin que les utilisateurs puissent choisir de développer ou non le texte intégral. Dans le développement Web, jQuery est l'une des bibliothèques d'outils les plus utilisées. Ci-dessous, nous utiliserons un exemple pour montrer comment utiliser jQuery pour obtenir l'effet de cliquer davantage pour afficher.

Tout d'abord, nous devons présenter la bibliothèque jQuery, qui peut être introduite via CDN, ou vous pouvez télécharger la bibliothèque jQuery localement et l'importer. En prenant la méthode CDN comme exemple, le code est le suivant :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Ensuite, nous devons effectuer une mise en page pertinente en HTML, par exemple :

<div class="card">
  <h2>这是一个标题</h2>
  <p>这是一段文字，可能比较长，需要进行折叠。</p>
  <a class="show-more">更多</a>
  <a class="show-less">收起</a>
</div>

Dans cet exemple, nous utilisons une mise en page de carte avec titre et contenu, et ajoutons deux liens, à savoir « Plus » et « Réduire ».

Ensuite, nous pouvons utiliser jQuery pour obtenir l'effet de cliquer pour en afficher davantage. Le code spécifique est le suivant :

$(function() {
  // 隐藏“收起”链接
  $(".show-less").hide();
  // 获取要显示的元素
  var content = $(".card p");
  // 要显示的字符数
  var chars = 100;
  // 如果内容长度小于字符数，不进行折叠处理
  if (content.text().length > chars) {
    // 隐藏超出字符数的内容
    var short = content.text().substr(0, chars);
    var long = content.text().substr(chars);
    content.html(short + '<span class="d-inline-block ellipsis">...</span><span class="long d-none">' + long + '</span>');
    // 点击更多
    $(".show-more").click(function() {
      $(this).hide();
      $(".show-less").show();
      $(".card p .long").removeClass("d-none");
      $(".card p .ellipsis").addClass("d-none");
    });
    // 点击收起
    $(".show-less").click(function() {
      $(this).hide();
      $(".show-more").show();
      $(".card p .long").addClass("d-none");
      $(".card p .ellipsis").removeClass("d-none");
    });
  }
});

La logique du code ci-dessus est à peu près la suivante :

1. Tout d'abord, on masque le lien "Réduire", car dans l'état initial, l'élément à afficher est déjà dans l'état réduit state ;
2. Ensuite, nous obtenons l'élément de contenu à réduire et le nombre de caractères à afficher
3. Si la longueur du contenu à afficher est inférieure au nombre de caractères, le processus de pliage ne sera pas effectué ; ;
4. Sinon, nous devons masquer le contenu qui dépasse le nombre de caractères et l'ajouter à la fin. Ajoutez le symbole "..."
5. Lorsque l'utilisateur clique sur le lien "Plus", nous devons développer le contenu ; qui dépasse le nombre de caractères et masquer le symbole "..." et le lien "Plus"
6. Lorsque l'utilisateur clique sur le lien "Réduire", nous devons réduire le contenu qui dépasse le nombre de caractères et afficher le Symbole "..." et le lien "Plus".

La logique ci-dessus est en fait très simple, mais il y a de nombreux points auxquels il faut prêter attention. Ci-dessous, nous expliquons certains des points clés.

Tout d'abord, nous ajoutons un élément avec la classe ".long" en HTML pour masquer le contenu qui dépasse le nombre de caractères. Il peut être défini comme ceci en CSS :

.long {
  white-space: pre-wrap;
}

Ici, nous définissons son attribut d'espace blanc sur "pre-wrap", principalement pour éviter que les mots ne soient tronqués. Dans le navigateur, par défaut, la valeur de l'attribut espace blanc est « normal », c'est-à-dire qu'il ne renverra pas automatiquement les lignes à la ligne et ne coupera les lignes que lorsqu'un espace ou un caractère de tabulation est rencontré.

Deuxièmement, nous avons ajouté un élément avec la classe ".ellipsis" dans le HTML pour ajouter les points de suspension "...". Il peut être défini comme ceci en CSS :

.ellipsis:before {

  font-weight: bold;
}

Enfin, nous devons noter que lors de la liaison des événements jQuery, l'événement click est utilisé. Avec le développement de HTML5, l'événement click n'est pas très convivial du côté mobile, car l'événement touch côté mobile est similaire à l'événement click, mais pas exactement le même. Afin d'être compatible avec différents appareils et navigateurs, il est recommandé d'utiliser la méthode on de jQuery pour lier les événements. Vous pouvez choisir les événements liés en fonction des besoins réels.

En résumé, la fonction cliquer pour afficher basée sur jQuery peut fournir une bonne expérience utilisateur pour notre site Web, permettant aux utilisateurs de choisir plus librement s'ils souhaitent développer tout le contenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!