Question

为什么我们需要点击两次（http://jsfiddle.net/xL8hyoye/4/）：

HTML：

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

css：#foo {display: none;}

JS：

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'none')
      e.style.display = 'block';
   else
      e.style.display = 'none';
}

此处只有一次点击文字消失（http://jsfiddle.net/xL8hyoye/5/）：

HTML：

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" style='display:none'>This is foo</div> <!-- add display style here -->

css：

JS：

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'none')
      e.style.display = 'block';
   else
      e.style.display = 'none';
}

Answer 1

检查style.display属性是否为空

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block' || e.style.display == '')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

Answer 2

因为.style正在查看除其CSS样式表之外的元素的直接内联样式。例如，如果它看起来如此，它将起作用：

<div id="foo" style="display: none;">This is foo</div>

Here is an example。否则，.style放置在CSS中时无法定义。在第二个示例中，第一次单击定义e.style.display，然后它在之后正常工作。这就是为什么它需要两次点击。

另一种解决方法是添加一个else，因为e.style.display将其更改为您想要的，假设元素在开头隐藏：

if(e.style.display == 'block')
    e.style.display = 'none';
else if( e.style.display == 'none' )
    e.style.display = 'block';
else 
    e.style.display = 'block';

Answer 3

在getElementById（）文档中，他们声明：

Document.getElementById()

通过其ID返回对元素的引用。

在此处查看： https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

因此，您的javascript代码仅在第一次迭代时评估HTML 无CSS 。我猜这就是为什么首先转到else，然后在第二次点击时它会e.style.display给出值block;因为e.style.display有none作为值。

尝试使用与getElementById（）不同的方法。

希望它有所帮助！

Answer 4

这可以通过更改if-else语句中的顺序来解决，例如：

if(e.style.display == 'block')
    e.style.display = 'none';
else
    e.style.display = 'block';

DEMO

注意：您的初始代码不起作用，因为e.style.display的初始值为""而不是none：）

JS一键切换（不是两次点击） - 切换元素的默认值

4 个答案: