JavaScript按钮开关
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript按钮开关相关的知识，希望对你有一定的参考价值。
我正在尝试创建一个简单的移动网站，目标是有一个div我可以点击它打开它下面的div。 html设置为2个div在彼此的顶部，底部div的显示的CSS设置为“none”。在javascript中有一个事件监听器等待点击然后将显示设置为'block'并打开底部div。如何进行相同的操作（重新单击顶部div）将底部div的显示设置回“无”。
目前的基本代码：
document.getElementById('divOne').addEventListener('click',function(){
document.getElementById('divTwo').style.display = 'block';
});#divOne {
border: 1px solid black;
}
#divTwo {
border: 1px solid black;
display: none;
}<div id="divOne">Click me</div>
<div id="divTwo">Hello World!</div>
答案
只需检查元素上是否设置了display: block。
document.getElementById('divOne').addEventListener('click',function() {
var divTwo = document.getElementById('divTwo');
if(divTwo.style.display === 'block') {
divTwo.style.display = 'none';
} else {
divTwo.style.display = 'block';
}
});#divOne {
border: 1px solid black;
}
#divTwo {
border: 1px solid black;
display: none;
}<div id="divOne">Click me</div>
<div id="divTwo">Hello World!</div>另一答案
您可以先检查显示是否为none，然后将其切换为阻止，反之亦然。我将元素的DOM对象存储在变量中以保持其清洁。
document.getElementById('divOne').addEventListener('click', function() {
var divtwo = document.getElementById("divTwo");
divtwo.style.display = divtwo.style.display === 'none' ? 'block' : 'none';
});
另一答案
在事件监听器中，您可以检查divTwo的当前显示样式，如果是block，则将其设置为none，反之亦然。像这样的东西：
document.getElementById('divOne').addEventListener('click',function(){
var divTwo = document.getElementById('divTwo');
if (divTwo.style.display === 'none') {
divTwo.style.display = 'block'
} else {
divTwo.style.display = 'none'
}
});
以上是关于JavaScript按钮开关的主要内容，如果未能解决你的问题，请参考以下文章