JavaScript onclick 需要两次点击

问题描述

我的问题是，当 onclick 触发 toggleNew 函数时，它没有执行，但是当我再次单击 div 时，它正在执行它应该...

My problem is that when onclicktriggers the toggleNew function it's not executing but when I click the div a second time it's executing just as it should...

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 时使该功能起作用?

What is happening here and how can I make the function work the first time a user clicks the div?

推荐答案

这将无法正常工作，因为您在 'div#aside_main' 中使用了以下将被隐藏的行.

This will not work properly because you are using following line inside 'div#aside_main' which is going to be hidden.

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

试着像这样把它放在外面-

Try keeping it outside like this-

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

同样在 javascript 中，它不会在 if 条件下第一次检查e.style.display".

Also in javascript it is not checking for 'e.style.display' first time in if condition.

尝试使用

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

这篇关于JavaScript onclick 需要两次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！