切换 div。了解显示直到切换。

Question

我正在尝试创建一个 onclick 的 div。我遇到了一个简单的问题，但由于我还不熟悉 JavaScript，所以不知道该如何解决。

当页面加载时，我的 div 会显示出来。但我希望只有在切换后才会显示。

我想这应该只是在 PHP 中进行简单的更改。

谢谢。

function myFunction() {
    var x = document.getElementById("onclickmenu");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

#onclickmenu {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

<button onclick="myFunction()">Menu</button>

<div id="onclickmenu">
    <p> hej</p>
</div>

- NoCSStoday

Answer 1

将"display:none"添加到您的"#onclickmenu css"中。

#onclickmenu {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}

edit因为getter是element.style.display，所以需要将其改为内联样式属性：

<div id="onclickmenu" style="display:none;">

一个更好的方法是使用一个隐藏元素的CSS类，并使用jQuery来切换该类。

- A Macdonald

---

谢谢。当我这样做时，div 元素不会在第一次按下按钮时显示出来，需要再按一次才能显示。之后，它就可以切换 div 的显示和隐藏了。我猜这是因为它最初会显示 div，但并不会将其显示出来。有没有什么方法可以避免这种情况，以便访问者在按下按钮时不会感到困惑？ - NoCSStoday

啊，好的。使用内联样式来解决这个问题，例如：<div id="onclickmenu" style="display:none;"> - A Macdonald

Answer 2

当页面最初加载时，div 元素的样式设置为您在 CSS 中定义的样式。

#onclickmenu {
   width: 100%;
   padding: 50px 0;
   text-align: center;
   background-color: lightblue;
   margin-top: 20px;
}

这意味着，默认情况下它会显示出来。你需要修改这个CSS来最初隐藏这个div。

 #onclickmenu {
   width: 100%;
   padding: 50px 0;
   text-align: center;
   background-color: lightblue;
   margin-top: 20px;
   display: none;  <--------- add this
 }

然后您可以使用JavaScript修改元素的样式（就像您正在做的那样），将显示参数更改为块。

更新

为了解决初始单击未显示div的问题，看起来您的函数的第一次迭代中x.style.display设置为未定义。我没有时间深入研究原因，但解决方法很简单：

 <script>
 function myFunction() {
     var x = document.getElementById("onclickmenu");
     if (!x.style.display || x.style.display === "none") {
         x.style.display = "block";
     } else {
         x.style.display = "none";
     }
 }
 </script>

if语句的新增部分检查x.style.display是否已定义，如果没有（或者显示为none），则将其设置为块

- Marshall Tigerus

---

谢谢。当我这样做时，div 元素不会在第一次按下按钮时显示出来，需要再按一次才能显示。之后，它就可以切换 div 的显示和隐藏了。我猜这是因为它最初会显示 div，但并不会将其显示出来。有没有什么方法可以避免这种情况，以便访问者在按下按钮时不会感到困惑？ - NoCSStoday

我不确定为什么，但出于某些原因，在第一次调用时，x.style.display 被设置为未定义。我建议你更新 if 语句，将其包括 !x.style.display || x.style.display == "none"，这基本上意味着“如果未定义或设置为 none，则执行此操作”。 - Marshall Tigerus

Answer 3

你可以使用JS或jQ在加载时将其隐藏。

jQuery：

 $(document).ready(function(){
    $('#onclickmenu').hide(); 
});

JavaScript：

(function() { //this is self executing on load 
   // here you put your code
    var x = document.getElementById("onclickmenu");
    x.style.display = "none"; 
})();

建议使用jQuery，因为它可以减少代码量，并且有很多函数可供使用，例如在您的情况下，您可以使用show()或hide()函数，从而节省10行代码。

- D.V.D.

Answer 4

如果您想默认隐藏，并在单击按钮时显示它，只需将display:none添加到#onclickmenu的CSS中即可。

- danny barlev

---

谢谢。当我这样做时，div 元素不会在第一次按下按钮时显示出来，需要再按一次才能显示。之后，它就可以切换 div 的显示和隐藏了。我猜这是因为它最初会显示 div，但并不会将其显示出来。有没有什么方法可以避免这种情况，以便访问者在按下按钮时不会感到困惑？ - NoCSStoday

Answer 5

哎呀，你刚刚遇到了一个棘手的问题。 display 有点特殊。 详情

但从技术上讲，你最初将 display 设置为 none

这是使用 jQuery 的好理由，开始可能有点混乱，但相信我，值得努力。编程速度更快，更稳定（例如跨浏览器）。 入门jQuery

function myFunction() {
    var x = document.getElementById("onclickmenu");
    var display = x.currentStyle ? x.currentStyle.display : getComputedStyle(x, null).display;
    
    if (display === "block" ) {
        x.style.display = "none";
    } else {
      x.style.display = "block";
    }
}

#onclickmenu {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    display: none; /* hidden by default */}

<button onclick="myFunction()">Menu</button>

<div id="onclickmenu">
    <p> hej</p>
</div>

- SirPilan