javascript - JavaScript onclick需要两次单击

Question

我的问题是，当onclick触发toggleNew函数时，它不会执行，但是当我第二次单击div时，它会按应有的方式执行...

HTML:

<div id="aside_main">
    <div onclick="toggleNew();">click</div>
    content
</div>
<div id="aside_new">
    content
</div>

JS:

function toggleNew() {
   var e = document.getElementById('aside_main');
   var se = document.getElementById('aside_new');
   if(e.style.display == 'block') {
    e.style.display = 'none';
    se.style.display = 'block';
   } else {
    e.style.display = 'block';
    se.style.display = 'none';
   }
}

CSS:

#aside_main {
  display: block;
} 
#aside_new {
  display: none;
}

这是怎么回事，我如何在用户第一次单击 div时使该功能起作用？

Answer 1

这将无法正常工作，因为您正在'div＃aside_main'内部使用以下行，该行将被隐藏。

 <div onclick="toggleNew();">click</div>

试着像这样把它放在外面

<div onclick="toggleNew();">click</div>
 <div id="aside_main">
  content
 </div>
 <div id="aside_new">
  content2
</div>

同样在javascript中，如果条件不满足，则不会第一次检查“e.style.display”。

尝试使用

    if(e.offsetWidth > 0 || e.offsetHeight > 0){
      e.style.display = 'none';
      se.style.display = 'block';
    }
    else
    {
      e.style.display = 'block';
      se.style.display = 'none';
    }