共计 2402 个字符，预计需要花费 7 分钟才能阅读完成。
本节咱们来学习如何应用 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/
正文完
