在 jQuery 中，您可以使用 .toggle() 方法来切换元素，任何元素。但是，如果您正在寻找纯 JavaScript 解决方案，那么这里就是。我在这里分享一个简单的代码，它展示了使用 JavaScript 切换或显示/隐藏 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>
试试看
JS 代码中的一个简单的 if-else条件就可以解决问题。在上面的示例中，我正在更改按钮单击时元素的显示属性。您可以使用三元运算符
进一步简化上述代码。例如，
进一步简化上述代码。例如，
<script>
function toggle(ele) {
var cont = document.getElementById('cont');
cont.style.display = cont.style.display == 'none' ? 'block' : 'none';
}
</html>
试试看
不仅在按钮单击时，您还可以根据其他条件更改元素的可见性，例如在有人选择或取消选择SELECT 下拉列表中的值时切换 <div> 元素等。
谢谢阅读。?
