使用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';
          }
        });

      }

    });

工作示例在这里 。