Question

我想显示然后隐藏div但是当我点击按钮时它第一次不起作用，当我第二次点击它正常工作。我希望它在第一次点击时起作用。

HTML

    <p>Click the button</p>
    <button onclick="myFunc()">Try it</button>
    <div id="divi">
     Div region
    </div>

CSS

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

的Javascript

       function myFunc() {
        var dv = document.getElementById('divi');
        if (dv.style.display ==='none') {
        dv.style.display = 'block';
        } else {
         dv.style.display = 'none';
         }
         }

以下是笔：https://codepen.io/animaxf/pen/xdVVbK

Answer 1

这是因为从技术上讲，style属性为空，因此style.display实际上是null。所以首先点击它就会display:none;。

如果您将JavaScript更改为：

function myFunc() {
  var dv = document.getElementById('divi');
  if (dv.style.display === 'block') {
    dv.style.display = 'block';
  } else {
    dv.style.display = 'none';
  }
}

基本上检查它是阻塞的 - 它会起作用。

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display === 'block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

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

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

Answer 2

首先点击让它落入else语句并显示它。

之后你处于一个良好的循环中。

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display == 'block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

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

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

Answer 3

添加此内容 <div id="divi" style="display:none">

第一次，没有为div定义显示

Answer 4

第一次点击时没有应用任何样式（dv.style.display =“”）因此，dv.style.display！=='none'变为true，dv.style.display ='none'得到应用。

function myFunc() {
    var dv = document.getElementById('divi');
  
    if (dv.style.display !=='none'&& dv.style.display !=="") {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

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

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

Answer 5

第一次单击时没有设置display属性。刚刚切换属性 - 它会起作用。

https://codepen.io/anon/pen/XRddvd

Answer 6

第一次单击该按钮时，CSS属性display尚未设置，因此当发生单击时，它会检查dv.style.display !== 'none'，而实际上dv.style.display === ''

您可以在代码中修复此问题，或者您可以简单地更改CSS，因为它是更优雅的解决方案。只需将display: block（或display: none根据您的一厢情愿的开始状态）应用到其{CSS>定义内的#divi。

Answer 7

这是因为你改变了div的样式，但是display:none属性在class元素中。因此，div第一次没有display属性，并将其声明为none。要解决此问题，请将style="display:none;放在div上，而不是在css文件中声明它

Answer 8

首次加载页面时，该类未声明，这意味着您声明if (dv.style.display !=='none')将返回true，然后应用显示属性dv.style.display = 'none';

相反，您应该使用if (dv.style.display =='block')来检查它是否显示。

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display =='block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

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

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

在javascript中隐藏和显示div

8 个答案: