Maison > Article > interface Web > jquery cliquez pour agrandir réduire le remplacement du texte

jquery cliquez pour agrandir réduire le remplacement du texte

PHPzoriginal: 2023-05-18 14:59:39562parcourir

jQuery Cliquez pour développer/réduire le remplacement du texte

Dans la conception Web, nous avons souvent besoin d'utiliser la fonction développer/réduire, comme l'expansion de la liste, les options de liste déroulante, les détails de l'article, etc. . Il est relativement simple d'implémenter cette fonction en utilisant jQuery. Jetons un coup d'œil à la méthode d'implémentation spécifique.

Structure HTML

Construisons d'abord la structure HTML. Ici, nous prenons comme exemple une extension de liste. #🎜 🎜#

<ul class="list">
  <li>
    <h3>标题1</h3>
    <div class="content">内容1</div>
  </li>
  <li>
    <h3>标题2</h3>
    <div class="content">内容2</div>
  </li>
  <li>
    <h3>标题3</h3>
    <div class="content">内容3</div>
  </li>
</ul>

Chaque élément de la liste comprend un titre et un contenu Par défaut, nous affichons uniquement le titre, et il faut cliquer sur la partie contenu pour la développer et l'afficher.

Ensuite, nous définissons le style CSS du titre et du contenu afin qu'ils puissent être affichés normalement et distingués : #🎜 🎜#

.list li {
  margin-bottom: 10px;
}

.list li h3 {
  color: #333;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 5px;
}

.list li .content {
  display: none;
  margin-left: 20px;
  font-size: 14px;
  line-height: 1.5;
}

Ici, nous devons définir le style du titre sur une forme de main pour indiquer que l'on peut cliquer dessus pour le développer. La partie contenu est masquée par défaut, l'attribut display doit donc être défini sur none.

script jQuery

La prochaine étape est la partie clé, nous devons utiliser jQuery pour implémenter la fonction de cliquer sur le titre pour développer/ effondrement. La méthode de mise en œuvre spécifique peut être divisée en les étapes suivantes :

Ajouter un écouteur d'événement de clic : ajoutez un écouteur d'événement de clic à chaque titre et déclenchez l'événement lorsque l'utilisateur clique.

$('.list li h3').click(function() {
  // to do
});

Trouver la partie de contenu correspondante : recherchez la partie de contenu correspondante via le sélecteur jQuery, puis affichez-la ou masquez-la.

$('.list li h3').click(function() {
  var content = $(this).siblings('.content');

  if (content.is(':visible')) {
    content.hide();
  } else {
    content.show();
  }
});

Modifier le texte du titre : Selon l'état d'affichage du contenu, modifiez le texte du titre et remplacez "développer" par "réduire".

$('.list li h3').click(function() {
  var content = $(this).siblings('.content');

  if (content.is(':visible')) {
    content.hide();
    $(this).text($(this).text().replace('收起', '展开'));
  } else {
    content.show();
    $(this).text($(this).text().replace('展开', '收起'));
  }
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 点击展开/收起文字替换</title>
  <style>
    .list li {
      margin-bottom: 10px;
    }

    .list li h3 {
      color: #333;
      cursor: pointer;
      font-size: 16px;
      margin-bottom: 5px;
    }

    .list li .content {
      display: none;
      margin-left: 20px;
      font-size: 14px;
      line-height: 1.5;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      $('.list li h3').click(function() {
        var content = $(this).siblings('.content');

        if (content.is(':visible')) {
          content.hide();
          $(this).text($(this).text().replace('收起', '展开'));
        } else {
          content.show();
          $(this).text($(this).text().replace('展开', '收起'));
        }
      });
    });
  </script>
</head>
<body>
  <ul class="list">
    <li>
      <h3>标题1</h3>
      <div class="content">内容1</div>
    </li>
    <li>
      <h3>标题2</h3>
      <div class="content">内容2</div>
    </li>
    <li>
      <h3>标题3</h3>
      <div class="content">内容3</div>
    </li>
  </ul>
</body>
</html>

Ce qui précède explique comment utiliser jQuery pour implémenter la fonction cliquer sur développer/réduire et modifier le texte du titre en même temps. Grâce à cet exemple simple, nous pouvons constater que l'utilisation de jQuery peut nous aider à réaliser plus rapidement certains effets d'interaction de page courants, tout en améliorant également l'expérience utilisateur.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：évasion du support nodejsArticle suivant：évasion du support nodejs

Articles Liés

Voir plus