Javascript 顯示/隱藏 div 需要點擊兩次

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 構建為id + '_arrow'並傳遞'probability_inputs' 。

Answer 2

我知道我回答這個問題有點晚了，但我有一個解決方案。 有兩個問題需要解決，它們如下：

• 如 PSR 的回答所述，最后一個div的 ID 不正確。
• 在toggleDiv方法中檢查元素的 style 屬性並沒有說明頁面加載時缺少 style 屬性。

關於第一個問題，ID 應為probability_inputs_arrow ，它解決了切換時箭頭未更新的問題。 然而，第二個問題需要更多的解釋......

在頁面加載時，提供的 CSS 將應用於 ID 為probability_inputs和start_conditions的元素，為它們提供顯示值none。 單擊這些箭頭中的任何一個后，您將檢索目標元素的樣式屬性，並檢查頁面加載時為空的 display 屬性。 這就是為什么它需要兩次單擊才能實現所需的行為，因為第一次單擊實際上只是在 else 語句中設置該值。

這是包含修復程序的更新 Codepen 的鏈接： https ://codepen.io/anon/pen/oweELy

Answer 3

實際上你在這里遇到錯誤

第二個元素需要有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類的值設置為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';
       }

}; `