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';
    }

Answer 2

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

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

Answer 3

您需要在div onclick中调用类似onclick="toggleNew();"的函数。我刚刚在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

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

这是调用函数的方法。

如果您想传递该功能，那么您只使用toggleNew //传递

它们是两种不同的活动。

Answer 6

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

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

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

Answer 7

我遇到了相同的双击必需问题。我使用的是内部样式表，它可以像这样正确设置显示。加载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 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>

JavaScript onclick需要两次点击

8 个答案: