1

我有代码可以根据单击箭头来显示/隐藏两个 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

4

5 回答 5

3

第二个箭头元素应该有probability_inputs_arrowas id 而不是probability_arrow，因为你在函数 as 中构建它的 idid + '_arrow'并且你 pass 'probability_inputs'。

于 2013-03-15T14:31:51.600 回答
2

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

  • 如 PSR 的回答中所述，最后一个 IDdiv不正确。
  • 在方法中检查元素的样式属性toggleDiv并不能说明页面加载时缺少样式属性。

关于第一个问题，ID 应为probability_inputs_arrow，这解决了箭头在切换时未更新的问题。但是，第二个问题需要更多解释......

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

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

于 2017-06-23T16:58:18.067 回答
1

实际上你在这里遇到错误

在此处输入图像描述

第二个元素需要有probability_inputs_arrowas id 而不是probability_arrow，

于 2013-03-15T14:33:39.943 回答
1

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>
于 2020-01-05T15:00:50.130 回答
0

我遇到了这个问题，这是由于 DIV 的默认状态。即使你设置了DIV类的值设置为display:none，也会出现一些浏览器不接受这个状态，因此是未知的。

为了解决这个问题，使用您自己的代码，添加另一个默认条件：

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

}; `

于 2019-10-19T20:19:30.010 回答