📌  相关文章
📜  jQuery toggle()(1)

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

jQuery toggle()方法介绍

jQuery toggle()方法可以在两种状态之间切换元素的可见性。它是jQuery中最常用的方法之一，因为它可以轻松地为一个元素添加一个交互行为。

语法
$(selector).toggle(speed, easing, callback)
  • selector: 必需的，要切换可见性的元素的选择器。
  • speed: 可选的，规定切换的速度，可以是“slow”、 “fast” 或毫秒数。
  • easing: 可选的，规定切换的速度类型，可以是“linear” 或“swing”。
  • callback: 可选的，指定完成后要执行的函数。
实例

通过下面的例子来理解toggle()方法：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#toggle-btn").click(function(){
        $("#toggle-demo").toggle();
      });
    });
  </script>
  <style>
    #toggle-demo {
      background-color: lightblue;
      width: 200px;
      height: 100px;
      display: none;
    }
  </style>
</head>
<body>

<button id="toggle-btn">点击切换可见性</button>
<div id="toggle-demo"></div>

</body>
</html>

在这个例子中，我们通过点击“点击切换可见性”按钮来切换显示和隐藏<div>元素。初始时，<div>元素的display属性为none，所以它被隐藏起来了。当点击按钮时，调用了.toggle()方法，导致<div>元素的display属性从none切换到block，因此它被显示出来了。再次点击按钮时，display属性再次切换回none，<div>元素被隐藏。

总结

.toggle()方法可以在两种状态之间切换元素的可见性。通过添加可选的speed、easing和callback参数，可以进一步控制切换的效果。它是制作交互式网站的必备方法之一。