下拉菜单使用JS onclick -什么是错误的

drop - down menu using JS onclick - what is wrong?

本文关键字：什么 错误 onclick JS 下拉菜单      更新时间：2023-09-26

正在学习JS。我创建了3个下拉菜单与不同的选择，并添加了JS功能。HTML和CSS似乎是正确的。我担心我的JS，因为它只是不工作。甚至适合这个目的吗?我不确定我是否使用。

我真的很感激任何提示!

我的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>

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>

您可能想尝试使用jQuery来帮助您处理show()和hide()函数，尽管据说您可能不需要它:p

我不明白panel的声明…因此，我不能沿着panel.this走。我的解决方案附在这里:http://codepen.io/anon/pen/akXqwA

主要问题是，在for循环期间，i将在值3处结束。当事件被触发时，i将始终是3，并且我不能用panel[i]访问panel。

所以我做了一个"hack"围绕它，通过获得它的nextElementSibling和改变它的style.display。此外，我已经用HTML (style="display: none;")初始化了值。如果您删除了该部分，则第一次单击箭头将不会显示项目，因为style.display值不是"none"。有一种方法可以避免在HTML中更改:尝试使用;)

检查这个:

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';
          }
        });
      }
    });
相关文章：