Scénarios d'application courants de la méthode JQuery .toggle()-js tutoriel-php.cn

Scénarios d'application courants de la méthode JQuery .toggle()

PHPz

Libérer： 2024-02-23 17:21:04

original

553 Les gens l'ont consulté

JQuery .toggle() 方法的常见应用场景

Scénarios d'application courants et exemples de code spécifiques de la méthode JQuery .toggle()

Au cours du processus de développement front-end, nous rencontrons souvent des situations où nous devons contrôler l'affichage et le masquage des éléments. La méthode .toggle() dans JQuery est un outil très pratique qui peut changer l'affichage et l'état masqué des éléments lorsque vous cliquez dessus. Cet article présentera des scénarios d'application courants de la méthode .toggle() et fournira des exemples de code spécifiques.

Effets d'affichage et de masquage simples

L'utilisation la plus basique de la méthode toggle() est de contrôler l'affichage et le masquage d'un autre élément lorsque l'utilisateur clique sur un bouton ou un élément. Par exemple, pour afficher ou masquer une zone de texte lorsqu'un bouton est cliqué :

<!DOCTYPE html>
<html>
<head>
  <title>Toggle示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="toggleBtn">点击显示/隐藏</button>
  <div id="toggleDiv" style="display:none;">这是要显示或隐藏的内容</div>
  <script>
    $("#toggleBtn").click(function() {
      $("#toggleDiv").toggle();
    });
  </script>
</body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, cliquer sur le bouton fait basculer les états affiché et masqué de l'élément #toggleDiv. #toggleDiv元素的显示和隐藏状态。

交替显示多个元素

除了简单的显示与隐藏效果，.toggle()方法还可以用于交替显示多个元素。例如，点击按钮依次显示不同的段落文本：

<!DOCTYPE html>
<html>
<head>
  <title>多元素Toggle示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="toggleBtn">点击显示下一个段落</button>
  <p class="togglePara" style="display:none;">第一个段落</p>
  <p class="togglePara" style="display:none;">第二个段落</p>
  <p class="togglePara" style="display:none;">第三个段落</p>
  <script>
    var currentIndex = 0;
    $("#toggleBtn").click(function() {
      $(".togglePara").eq(currentIndex).toggle();
      currentIndex = (currentIndex + 1) % $(".togglePara").length;
      $(".togglePara").eq(currentIndex).toggle();
    });
  </script>
</body>
</html>

Copier après la connexion

在上面的示例中，点击按钮会交替显示三个不同的段落文本。

切换CSS类

除了直接控制显示与隐藏外，.toggle()方法还可以用于切换元素的CSS类。例如，点击按钮可以切换元素的背景颜色：

<!DOCTYPE html>
<html>
<head>
  <title>CSS类Toggle示例</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="toggleBtn">点击改变背景色</button>
  <div id="toggleDiv">这是要改变背景色的内容</div>
  <script>
    $("#toggleBtn").click(function() {
      $("#toggleDiv").toggleClass("highlight");
    });
  </script>
</body>
</html>

Copier après la connexion

在上面的示例中，点击按钮可以切换#toggleDiv

#toggleDiv

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!