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

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

Answer 3

可能不是最好的答案，但解决方法是通过样式属性使用内联 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 4

e.style.display 表示由 style 属性定义的元素的样式，它不给你计算的样式。获取计算的样式使用

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

Answer 5

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

#YourID {
    display: none;
}

单击与该功能关联的按钮时，我注意到第一次单击将内联显示设置为style="display: none;"。第二次点击设置内联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>