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>

Answer 1

将display：none添加到您的#onclickmens CSS

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

edit ，因为吸气剂是element.style.display，因此它需要是内联样式属性：

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

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

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修改元素的样式（如您所做的那样），以将display参数更改为block。

更新

要解决初始单击不显示div的问题，您的函数的第一次迭代似乎将x.style.display设置为undefined。我没有时间去研究为什么会这样，但是解决方法很简单：

 <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，如果未定义（或显示为空），则将显示设置为阻塞

Answer 3

如果您希望隐藏，并单击按钮以显示它，只需在#onclickmenu的css中添加display：none。

Answer 4

您只需在使用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行代码。

Answer 5

噢，你真讨厌。 display有点特殊。 details

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

这是使用jQuery的一个很好的理由，一开始有点令人困惑，但是请相信我值得努力。更快的编程方式更加稳定（例如，跨浏览器）。 Getting started with 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>

切换div。了解节目直到切换

5 个答案:

更新