在 jQuery 中，您可以使用 .toggle() 方法来切换元素，任何元素。但是，如果您正在寻找纯 JavaScript 解决方案，那么这里就是。我在这里分享一个简单的代码，它展示了使用 JavaScript 切换或显示/隐藏 DIV 元素是多么容易。
相关： 使用 jQuery 基于下拉选择切换 DIV 元素
<div> 元素通常用作容器，它还会包含许多其他元素，例如 form。您可能希望在满足某些条件时显示或隐藏 <div> 元素。
这是一个常见的场景。我希望在按钮单击时切换 <div> 元素。
标记和脚本<html>
<head>
<title>Toggle example using Pure JavaScript</title>
</head>
<body>
<p>
<input type="button" value="Show DIV" id="bt" onclick="toggle(this)">
</p>
<!--The DIV element to toggle visibility. Its "display" property is set as "none". -->
<div style="border:solid 1px #ddd; padding:10px; display:none;" id="cont">
<div>
<label>Name:</label>
<div><input id="name" name="yourname" /></div>
</div>
<div>
<label>Age:</label>
<div><input name="age" id="yourage" /></div></div>
<div>
<label>Additional Information (optional):</label>
<div><textarea style="width:100%;" rows="5" cols="46"></textarea></div>
</div>
</div>
</body>
<script>
function toggle(ele) {
var cont = document.getElementById('cont');
if (cont.style.display == 'block') {
cont.style.display = 'none';
document.getElementById(ele.id).value = 'Show DIV';
}
else {
cont.style.display = 'block';
document.getElementById(ele.id).value = 'Hide DIV';
}
}
</script>
</html>进一步简化上述代码。例如，
<script>
function toggle(ele) {
var cont = document.getElementById('cont');
cont.style.display = cont.style.display == 'none' ? 'block' : 'none';
}
</html>我也在 Angular 中分享了一个类似的例子。
不仅在按钮单击时，您还可以根据其他条件更改元素的可见性，例如在有人选择或取消选择SELECT 下拉列表中的值时切换 <div> 元素等。
谢谢阅读。☺
