jquery cliquez pour agrandir réduire le remplacement du texte-Questions et réponses frontales-php.cn

jquery cliquez pour agrandir réduire le remplacement du texte

PHPz

Libérer： 2023-05-18 14:59:39

original

561 Les gens l'ont consulté

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>

Copier après la connexion

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;
}

Copier après la connexion

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

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
});

Copier après la connexion

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();
  }
});

Copier après la connexion

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('展开', '收起'));
  }
});

Copier après la connexion

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

Copier après la connexion

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!