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

Question

我正在尝试创建一个onclick div。我有一个简单的问题，但我不知道如何解决它，因为我还是 javascript 的新手。

我的div 在我加载页面时显示。我希望它在切换之前不显示。

我想这是 php.ini 中的一个简单更改。

谢谢。

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 添加到您的#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 来切换该类。

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修改元素的样式（就像你正在做的那样）将显示参数更改为block。

更新

为了解决初始点击不显示 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，如果没有（或显示为无），则将显示设置为块

Answer 3

如果你想隐藏defulat，并且当按钮点击显示它，只需在#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>