互換方法：1、用“元素物件.toggle()”，當元素是可見狀態則隱藏元素，當元素不可見則顯示元素；2、用“元素物件.slideToggle()” ，當元素可見則隱藏元素，當元素不可見則顯示元素；3、用「元素物件.fadeToggle()」。
本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。
jquery實作顯示與隱藏互換有三種方法：
#toggle() 方法
toggle() 方法在被選元素上進行hide() 和show() 之間的切換。
此方法檢查被選元素的可見狀態。如果一個元素是隱藏的，則執行 show()，如果一個元素是可見的，則執行 hide() - 這會造成一種切換的效果。
註解：隱藏的元素不會被完全顯示（不再影響頁面的佈局）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换 hide() 和 show()</button>
</body>
</html>
slideToggle() 方法在被選元素上進行slideUp() 和slideDown( ) 之間的切換。
此方法檢查被選元素的可見狀態。如果一個元素是隱藏的，則運行 slideDown()，如果一個元素是可見的，則運行 slideUp() - 這會造成切換的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换 slideUp() 和 slideDown()</button>
</body>
</html>
fadeToggle() 方法在fadeIn() 和fadeOut() 方法之間切換。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
【推薦學習：
、web前端影片】
以上是jquery怎麼實現顯示與隱藏的互換的詳細內容。更多資訊請關注PHP中文網其他相關文章！
