JavaScript按钮开关

Question

我正在尝试创建一个简单的移动网站，目标是有一个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>

    

Answer 1

只需检查元素上是否设置了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>

Answer 2

您可以先检查显示是否为none，然后将其切换为阻止，反之亦然。我将元素的DOM对象存储在变量中以保持其清洁。

document.getElementById('divOne').addEventListener('click', function() {
  var divtwo = document.getElementById("divTwo");
  divtwo.style.display = divtwo.style.display === 'none' ? 'block' : 'none';
});

Answer 3

在事件监听器中，您可以检查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'
    }
});