本节咱们来学习如何应用 jQuery 中的办法来实现元素的显示与暗藏效。

hide()办法

hide() 办法用于暗藏指定的元素，与 CSS 中的 display:none 成果相似。

语法如下所示：

$(selector).hide(speed,easing,callback)
  • speed：可选，规定暗藏成果的速度。可选值为 slow、fast、毫秒。
  • easing：可选，规定在动画的不同点上元素的速度，可选值为 swing、linear。
  • callback：可选，hide() 办法执行完之后，要执行的函数。
示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){     $("button").click(function(){      $(".fruit").hide('slow','linear');     });  });</script></head><body>  <div>    <button>暗藏上面内容</button>    <div class="fruit">       <p>我喜爱的水果：</p>      <ul>        <li>西瓜</li>        <li>苹果</li>        <li>香蕉</li>        <li>桃子</li>        <li>哈密瓜</li>      </ul>    </div>  </div></body></html>

在浏览器中的演示成果：

show()办法

show() 办法用于显示暗藏的指定元素。与 CSS 中 display:none 的成果相似。

语法如下所示：

$(selector).show(speed,easing,callback)

show() 办法中的参数和 hide() 办法中参数相似。

示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){     $(".hide").click(function(){      $(".fruit").hide('slow','linear');     });     $(".show").click(function(){      $(".fruit").show('slow','linear');     });  });</script></head><body>  <div>    <button class="hide">暗藏上面内容</button>    <button class="show">显示上面内容</button>    <div class="fruit">       <p>我喜爱的水果：</p>      <ul>        <li>西瓜</li>        <li>苹果</li>        <li>香蕉</li>        <li>桃子</li>        <li>哈密瓜</li>      </ul>    </div>  </div></body></html>

在浏览器中的演示成果：

toggle()办法

下面示例中咱们在实现显示和暗藏成果时，须要应用两个按钮别离管制。那么有没有方法只通过一个按钮就能够实现显示和暗藏成果呢。这就须要用到 toggle() 办法了，toggle() 办法能够用于切换 hide() 和 show() 办法。

语法如下所示：

$(selector).toggle(speed,callback,switch)
  • speed：可选，规定元素从可见到暗藏的速度，可选值又slow、normal、fast、毫秒。
  • callback：可选，toggle 函数执行完之后，要执行的函数。
  • switch：可选，规定 toggle 是否暗藏或显示所有被选元素。True 示意显示所有元素，False 示意暗藏所有元素。如果设置此参数，则无奈应用 speed 和 callback 参数。
示例：

例如实现上述示例成果，咱们只须要像上面这样写即可，次要是批改 jQuery 代码局部：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){    $(".toggle").click(function(){      $(".fruit").toggle(1000);    });  });</script></head><body>  <div>    <button class="toggle">切换显示与暗藏</button>    <div class="fruit">       <p>我喜爱的水果：</p>      <ul>        <li>西瓜</li>        <li>苹果</li>        <li>香蕉</li>        <li>桃子</li>        <li>哈密瓜</li>      </ul>    </div>  </div></body></html>

在浏览器中的演示成果：

咱们来看一下区别，应用 show() 和 hide() 办法须要的代码：

$(function(){     $(".hide").click(function(){      $(".fruit").hide('slow','linear');     });     $(".show").click(function(){      $(".fruit").show('slow','linear');     });  });

应用 toggle() 办法须要的代码：

$(function(){    $(".toggle").click(function(){      $(".fruit").toggle(1000);    });});

所以很显著，在须要实现暗藏和显示两种成果互相切换时，应用 toggle() 办法是很不便的。

链接：https://www.9xkd.com/