本節我們來學習如何使用 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.506064.com/zh-hant/n/234973.html
微信掃一掃 
支付寶掃一掃 