Question

我有代码可以根据箭头的点击显示/隐藏两个div。但是，第二个div在隐藏之前需要两次单击，箭头不会按预期更改。顶级div完美运作。对于我做错了什么建议，拜托？

编辑 - 感谢两张海报在箭头中指出了我的命名错误。但是，在加载页面后，第二个div在切换之前仍需要两次单击。

HTML

<div id="start_conditions_arrow" class="arrow_down" onclick="toggleDiv('start_conditions')"></div>
<h2>Starting Conditions</h2>

<div id="start_conditions">
    <%= render :partial => 'start_conditions', :object => @page.start_conditions %>
</div>

<div id="probability_arrow" class="arrow_right" onclick="toggleDiv('probability_inputs')"></div>
<h2>Probability Inputs</h2>

<div id="probability_inputs">
    <%= render :partial => 'probability_inputs', :object => @page.probability_inputs %>
</div>

的Javascript

var toggleDiv = function(id){
var tag = document.getElementById(id).style;
    if(tag.display == 'none'){
        document.getElementById(id).style.display='block';
        document.getElementById(id + '_arrow').className='arrow_down';
    } else {            
        document.getElementById(id).style.display='none';
        document.getElementById(id + '_arrow').className='arrow_right';
    }
};

CSS

.arrow_down, .arrow_right {
    width: 0; 
    height: 0;
    margin: 12px 12px 0 0;
    float: left;
    cursor: pointer;
}

.arrow_down {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 18px solid #d5d5d5;
}

.arrow_right {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid #d5d5d5;
}

#probability_inputs {
    display: none;
}

#start_conditions {
    display: none;
}

这是一个Codepen包括上面的内容：https://codepen.io/anon/pen/yXozYJ

Answer 1

第二个箭头元素应该probability_inputs_arrow作为ID，而不是probability_arrow，因为您在函数id + '_arrow'中构建了ID并且传递了'probability_inputs'。< / p>

Answer 2

我知道我回答这个问题有点迟，但我有一个解决方案。有两个问题需要解决，它们如下：

最后this.state的ID不正确，如PSR的答案所述。
对div方法中元素的style属性进行检查并不能解释页面加载时缺少样式属性。

关于第一个问题，ID应该是toggleDiv，它解决了问题，在切换时箭头没有更新。但是，第二个问题需要更多解释......

在页面加载时，提供的CSS将应用于ID为probability_inputs_arrow和probability_inputs的元素，并为它们提供显示值none。单击其中一个箭头后，您将检索目标元素的样式属性，并检查页面加载时显示属性。这就是为什么它需要两次单击才能实现所需的行为，因为第一次单击实际上只是在else语句中设置该值。

这是指向更新后的Codepen的链接，其中包含修复程序：https://codepen.io/anon/pen/oweELy

Answer 3

实际上你在这里收到错误

enter image description here

第二个元素需要probability_inputs_arrow作为ID，而不是probability_arrow，

Answer 4

第一次加载页面时，默认将style.display设置为“”，因此它最终在else块中结束，然后需要再次单击以转到if块。只需将其添加到您的else if语句中即可。

<script>  
  var x = document.getElementById("myDIV"); 
    if (x.style.display == "none") 

     {
   x.style.display = "block";
  }

    else if((x.style.display == 'null')||(x.style.display == ""))
  {
    x.style.display = "block";
  }
  else
  {
    x.style.display = "none";
  }
</script>

Answer 5

我遇到了这个问题，这是由于DIV的默认状态。即使您将DIV类的值设置为设置显示：无，也似乎某些浏览器不接受此状态，因此它是未知的。

要解决此问题，请使用您自己的代码，添加另一个默认条件：

 var toggleDiv = function(id){
 var tag = document.getElementById(id).style;
     if(tag.display == 'none')
       {
        document.getElementById(id).style.display='block';
        document.getElementById(id + '_arrow').className='arrow_down';
       } 
     else  if(tag.display == 'block') 
      {            
       document.getElementById(id).style.display='none';
       document.getElementById(id + '_arrow').className='arrow_right';
      }
     else
       {
        document.getElementById(id).style.display='block';
        document.getElementById(id + '_arrow').className='arrow_down';
       }

}; `

Javascript显示/隐藏div需要两次点击

5 个答案: