Question

<input tyoe="button" onclick="toggle()" value="Show Spoilers" />
<div id="spoilers" style="display: none;">Some spoilers</div>
<script>
function toggle(){
   var div = document.getElementById("spoilers");
   if(div.style.display = "none"){
      div.style.display = "block";
   } else {
      div.style.display = "none";
   }
}
</script>

它有效地显示，但无法隐藏div。所以它只适用于显示不隐藏它？我做错了什么？提前谢谢。

Answer 1

你在if

中忘了等于（=）

function toggle()
{
    var div = document.getElementById("spoilers");
    if(div.style.display === "none"){
        div.style.display = "block";
    } else {
        div.style.display = "none";
    }
}

示例：here

Answer 2

function toggle () {
    var div = document.getElementById('spoilers');

    div.style.display = div.style.display === 'none' ? 'block' : 'none';
}

Answer 3

如果你有一些扰流板带有＆＃34; s＆＃34;你应该使用一个类而不是一个ID。

然后我建议不要直接使用JavaScript，而是添加一个隐藏了css display:none属性的类。

function toggle(){ 
    var divs = document.getElementsByClassName("spoilers");
    for(var i = 0; i > divs.length i++){
        if(divs[i].classList.contains("hidden")) {
            divs[i].classList.remove = "hidden";
        } else { 
            divs[i].classList.add = "hidden"; 
        }
    }  
}

javascript切换按钮不工作

3 个答案: