Question

刚刚学习JS。我创建了3个带有不同选项的下拉菜单，并添加了JS功能。 HTML和CSS似乎是正确的。我担心我的JS，因为它不起作用。这个目的是否合适？我不确定我是否使用＆＃34;。这个＆＃34;在正确的地方。

我真的很感激任何提示！

我的JAVASCRIPT：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

this关键字指的是当前的scope。在您使用它的状态下没用。我建议找到与点击箭头相关联的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()函数，但据说you might not need it：P

我不理解panel的声明。因此我无法继续panel.this。我的解决方案附在此处： http://codepen.io/anon/pen/akXqwA

主要问题是，在for循环期间，i将以值3结束。触发事件后，i始终为3，我无法使用panel访问panel[i]。

所以我通过获取nextElementSibling并更改其style.display来围绕它做了一个“hack”。此外，我已使用HTML（style="display: none;"）初始化了该值。如果您删除了该部分，则第一次单击箭头将不会显示项目，因为style.display值不是“无”。有一种方法可以避免在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';
          }
        });

      }

    });

工作示例是here。

使用JS onclick下拉菜单 - 出了什么问题？

3 个答案: