使用JS onclick的下拉菜單-怎么了？

Question

只是學習JS。 我創建了3個具有不同選擇的下拉菜單，並添加了JS函數。 HTML和CSS似乎是正確的。 我擔心我的JS，因為它不起作用。 這樣做是否正確？ 我不確定是否在正確的位置使用“ .this”。

我真的很感謝任何提示！

我的JAVASCRIPT：

 document.addEventListener("DOMContentLoaded", function() { console.log("DOM fully loaded and parsed"); var arrow= document.querySelectorAll(".list_arrow"); var panel= document.querySelectorAll(".list_panel"); for (var i= 0; i < arrow.length; i++) { arrow[i].addEventListener('click', function showDiv(event) { if (panel.this.style.display == 'none') { //panel(this.style.display=='none')? panel.this.style.display = 'block'; } else { panel.this.style.display = 'none'; } }); } }); HERE IS MY CSS 

 .form { margin-top:50px; } .drop_down_list { border:1px solid #8de0d2; width: 280px; height:38px; background-color: white; margin-top:22px; padding: 8px 12px; position: relative; } .list_label { font-size: 30px; color: #e2e2e2; font-family: 'ralewaylight', Arial, Tahoma, sans-serif; } .list_arrow { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #24baa0; display:block; position: absolute; right: 14px; top: 20px; cursor: pointer; } .list_panel { background-color: white; border: 1px solid #ccc; width: 288px; padding-left: 15px; padding-bottom: 10px; list-style: none; margin: 0; left: 0px; z-index: 2; position: absolute; top: 54px; display:none; } .list_panel li { margin-top:10px; cursor: pointer; color: #585858; } 

  <div class="form"> <div class="drop_down_list"> <span class="list_label">Choose a chair</span> <span class="list_arrow"></span> <ul class="list_panel"> <li>Clair</li> <li>Margarita</li> <li>Selena</li> </ul> </div> </div> <div class="drop_down_list"> <span class="list_label">Choose color</span> <span class="list_arrow"></span> <ul class="list_panel"> <li>red</li> <li>black</li> <li>orange</li> </ul> </div> <div class="drop_down_list"> <span class="list_label">Choose material</span> <span class="list_arrow"></span> <ul class="list_panel"> <li>a</li> <li>b</li> </ul> </div> </div> 

Answer 1

this關鍵字是指當前作用域 。 在您使用它的狀態下它沒有用。 我的建議是找到與單擊的箭頭關聯的list_panel 。 有很多方法可以做到這一點，但是您可以使用以下方法：

請注意，我還添加了默認的display-none類，以便在第一次單擊時顯示它們（不是這種情況）。

 document.addEventListener("DOMContentLoaded", function() { console.log("DOM fully loaded and parsed"); var arrow= document.querySelectorAll(".list_arrow"); for (var i= 0; i < arrow.length; i++) { arrow[i].addEventListener('click', function showDiv(event) { // Find the panel associated with the clicked arrow. var parent = event.target.parentNode, currentPanel = parent.children[2]; if (currentPanel.style.display == 'none') { currentPanel.style.display = 'block'; } else { currentPanel.style.display = 'none'; } }); } });</script> 

 .form { margin-top:50px; } .drop_down_list { border:1px solid #8de0d2; width: 280px; height:38px; background-color: white; margin-top:22px; padding: 8px 12px; position: relative; } .list_label { font-size: 30px; color: #e2e2e2; font-family: 'ralewaylight', Arial, Tahoma, sans-serif; } .list_arrow { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #24baa0; display:block; position: absolute; right: 14px; top: 20px; cursor: pointer; } .list_panel { background-color: white; border: 1px solid #ccc; width: 288px; padding-left: 15px; padding-bottom: 10px; list-style: none; margin: 0; left: 0px; z-index: 2; position: absolute; top: 54px; display:none; } .list_panel li { margin-top:10px; cursor: pointer; color: #585858; } 

  <div class="form"> <div class="drop_down_list"> <span class="list_label">Choose a chair</span> <span class="list_arrow"></span> <ul class="list_panel" style='display: none'> <li>Clair</li> <li>Margarita</li> <li>Selena</li> </ul> </div> </div> <div class="drop_down_list"> <span class="list_label">Choose color</span> <span class="list_arrow"></span> <ul class="list_panel" style='display: none'> <li>red</li> <li>black</li> <li>orange</li> </ul> </div> <div class="drop_down_list"> <span class="list_label">Choose material</span> <span class="list_arrow"></span> <ul class="list_panel" style='display: none'> <li>a</li> <li>b</li> </ul> </div> </div> 

Answer 2

您可能想嘗試使用jQuery來幫助您使用show()和hide()函數，盡管據說您可能不需要它 ：P

我不了解panel ..的聲明，所以我不能繼續使用panel.this 。 我的解決方案附在這里： http : //codepen.io/anon/pen/akXqwA

主要問題在於，在for循環期間， i將以值3結束。 觸發事件時， i將始終為3 ，並且無法使用panel[i]訪問panel 。

因此，我通過獲取其nextElementSibling並更改其style.display對其進行了“修改”。 另外，我已經用HTML初始化了值（ style="display: none;" ）。 如果刪除了該部分，則第一次單擊箭頭將不會顯示該項目，因為style.display值不是“ none”。 有一種避免在HTML中進行更改的方法：嘗試使用該行;）

Answer 3

檢查一下：

document.addEventListener("DOMContentLoaded", function() {
      console.log("DOM fully loaded and parsed");

      var arrow = document.querySelectorAll(".list_arrow");
      var panel = document.querySelectorAll(".list_panel");

      for (var i = 0; i < arrow.length; i++) {

        arrow[i].addEventListener('click', function showDiv(event) {
          var ulelm = this.parentNode.querySelector("ul");

          if (ulelm.style.display == 'none') { 
            ulelm.style.display = 'block';
          } else {
            ulelm.style.display = 'none';
          }
        });

      }

    });

工作示例在這里 。