Question

我有一个javascript函数，应该在点击时关闭div。但是，它适用于第二次单击。我怎么能避免这种情况？

的JavaScript

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

HTML

<div id="foota123">
    Content
    <div onclick="showhide('foota123')" class="iks">X</div>
</div>

Answer 1

e.style指div的style属性（style =“...”）。第一次，div上没有style属性。条件为false，代码设置样式属性：

<div style="display: block">

第二次，if条件为真，并且块的样式设置为“none”。所以它就消失了。

Answer 2

您的代码不处理元素上的计算样式，因此在第一次单击时元素仍在display:block中。

尝试使用jQuery：

function showhide(id) {
   $('#'+id).toggle();
}

$.toggle()会显示该元素是否隐藏其他隐藏。

Answer 3

style属性默认为空;例如：

var e = document.createElement('div');
e.style.display; // ""

简单地扭转这种状况应该可以解决这个问题：

function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = e.style.display == 'none' ? 'block' : 'none';
}

Answer 4

试试这个，如果你想要直接的javascript，jQuery答案更好但是：）

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

<div id="foota123">
Content
<div onclick="showhide('foota123')" class="iks">click me</div>
</div>

Answer 5

它对我有用。 Html代码

  <div id="foota123">
      Content
  </div>
  <div onclick="showhide('foota123')" class="iks">X</div>

脚本

<script type="text/javascript">
   function showhide(id) {
var e = document.getElementById(id);

if(e.style.display == 'block'){
  e.style.display = 'none';
}
else{
   e.style.display = 'block';
   }
}
 </script>

OR style =＆＃34; block＆＃34;也是一个更好的选择。

它会在第二次点击时关闭DIV，为什么？

5 个答案: