JavaScript onclick 需要两次点击

JavaScript onclick requires two clicks(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 需要两次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！