如何在 jQuery 中使用 toggle() 方法？(1)

📌 相关文章

📜 如何在 jQuery 中使用 toggle() 方法？(1)

📅 最后修改于: 2023-12-03 15:38:18.263000 🧑 作者: Mango

如何在 jQuery 中使用 toggle() 方法？

jQuery 中的 toggle() 方法用于在两个或多个函数之间进行切换。语法如下：

$(selector).toggle(function1, function2, function3, ...);

其中，selector 是要切换的元素，function1、function2、function3 等是要切换的函数。

当 toggle() 方法第一次被调用时，将执行第一个函数 function1，第二次调用时，将执行第二个函数 function2，以此类推。当执行到最后一个函数时，再次调用时将回到第一个函数，形成一个循环切换的效果。

需要注意的是，toggle() 方法不支持传递函数参数，可以在函数内部引用其他变量。

下面是一个简单的例子，随着按钮的点击，切换两段文字的显示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Toggle Demo</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div>
    <p id="text1">Text1</p>
    <p id="text2" style="display: none;">Text2</p>
  </div>
  <button id="toggle-button">Toggle Text</button>

  <script>
    $(document).ready(function() {
      var text1 = $('#text1');
      var text2 = $('#text2');

      $('#toggle-button').click(function() {
        text1.toggle();
        text2.toggle();
      });
    });
  </script>
</body>
</html>

上述代码中，首先定义了两个段落元素 #text1 和 #text2，其中 #text2 的样式设置为不可见。随后定义了一个按钮元素 #toggle-button，点击该按钮时会调用一个回调函数，使用 toggle() 方法切换 text1 和 text2 的显示状态。

最终效果如下图所示：

总之，利用 jQuery 的 toggle() 方法可以轻松实现元素的循环切换效果，具有很高的实用性。