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 中，它不会在 if 条件下第一次检查 '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';
    }

Answer 2

e.style.display表示由 style 属性定义的元素的样式，它不会为您提供计算样式。 获取计算样式使用

if (window.getComputedStyle(e,null).getPropertyValue("display") == 'block){

Answer 3

您需要调用函数onclick="toggleNew();" 在 div onclick 中。 我刚刚在fiddle 中添加了您的代码。

Answer 4

可能不是最好的答案，但解决方法是按样式属性使用内联 css。 像这样：

<div id="aside_main" style="display: block; border: 2px solid green;">
     <div onclick="toggleNew();">click</div>
     content
</div>
<div id="aside_new" style="display: none; border: 2px solid red;">
     content
</div>

Answer 5

我有同样的双击所需的问题。 我正在使用一个内部样式表，它可以像这样正确设置显示。 加载 HTML 文件时 #YourID 未按预期显示。

#YourID {
    display: none;
}

单击绑定到该功能的按钮时，我注意到第一次单击将内联显示设置为style="display: none;" . 第二次点击设置inline style="display: block;" 当然，然后它按预期显示。

我发现我需要用style="display: none;"直接内联设置元素并刚刚删除了实习生样式表条目（“#YourID”上方）。

我怀疑这在每种情况下都是 100% 的正确答案，但似乎潜在问题是由于未将元素设置在适当的初始状态以使函数正确对其进行操作造成的。

https://jsfiddle.net/em05a1kf

<div id="YourID" style="display: none;">
<b>Super Hidden Content</b>
</div>

<button onclick="ToggleID('YourID');">Do Foo</button>

<script type="text/javascript">
function ToggleID(idname) {
    var x = document.getElementById(idname);
    (x.style.display === "none") ? (x.style.display = "block") : (x.style.display = "none");
    return false;
}
</script>

Answer 6

在您的情况下：使用onclick="toggleNew();" // 调用

这是调用函数的方式。

如果你想传递函数，那么你只使用toggleNew //passing

它们是两种不同的活动。

Answer 7

这是另一种方法。 你只需要在你的javascript代码中添加两行——

    document.getElementById('aside_main').style.display='block';
    document.getElementById('aside_new').style.display='none';

在 javascript 中设置初始显示属性。 这将正常工作。

Answer 8

解决这个问题的一种方法（对我来说是最简单的方法）是计算点击次数。

为此，您在函数 toggleNew() 之外将新的 intiger 变量 click 设置为 0，并且每次调用您的函数时，您都会增加变量 click 为 1，如下所示：

<script> var click = 0;
         function toggleNew() { 
         click = click +1;
         var e = document.getElementById('aside_main');
         var se = document.getElementById('aside_new');
         if (click > 1) {
                         if(e.style.display == 'block') {
                                                     e.style.display = 'none';
                                                     se.style.display = 'block';
                            } else {
                                     e.style.display = 'block';
                                     se.style.display = 'none';
                                    }        
          } else {    
                  e.style.display = 'none';
                  se.style.display = 'block';
                  }
        }
</script>