具有数据属性的多个下拉切换

Question

我有一个代码（下面的片段），但我不明白为什么在单击按钮时，它只显示第一个下拉菜单的菜单。当点击第二个按钮时，它什么都不做。

有什么想法吗？

谢谢

document.querySelector("[data-toggle=dropdown]").addEventListener("click", function() {
  document.querySelector(this.getAttribute("data-target")).classList.toggle("d-block");
});

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  text-align: left;
  background: #f8f9fa;
  border-radius: 0.25rem;
  z-index: 1;
  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.23);
}

.dropdown-item {
  display: block;
  padding: 0.25rem 1rem;
  white-space: nowrap;
}

.d-block {
  display: block
}

<div class="dropdown">
  <button data-toggle="dropdown" data-target="#test" class="btn btn-success">Dropdown</button>
  <div id="test" class="dropdown-menu"><a class="dropdown-item">Item</a><a class="dropdown-item">Item</a></div>
</div>
<div class="dropdown">
  <button data-toggle="dropdown" data-target="#test1" class="btn btn-success">Dropdown</button>
  <div id="test1" class="dropdown-menu"><a class="dropdown-item">Item</a><a class="dropdown-item">Item</a></div>
</div>

Answer 1

一个简单的解决方案，至于为什么你的代码不起作用，你的目标是一个单个 dom对象通过使用 querySelector，因为这将获取满足查询要求的第一个 dom 对象。而querySelectorAll会抓取所有满足查询条件的元素，希望对你有所帮助。

编辑

我加入了这个功能，这样如果你点击下拉菜单两次，它就会隐藏当前的下拉菜单！ :)

var list = document.querySelectorAll("[data-toggle=dropdown]");
for (var i = 0, s = list.length; i< s; i ++) {
  var elm = list[i];
  elm.addEventListener("click", function() {
    // this for loop will hide previously clicked drop downs
    for (var j = 0, z = list.length; j < z; j++) { 
      if (list[j] != this) {
        var elm = document.querySelector(list[j].getAttribute("data-target"));
        var str = elm.className.replace("d-block");
        elm.className = str;
      }
    } // if you like, remove the above loop
    var obj = document.querySelector(this.getAttribute("data-target"));
    if (obj.className.indexOf("d-block") > 0) { 
      var temp = obj.className.replace("d-block", "");
      obj.className = temp; 
    } else { obj.className += " d-block"; }
  });
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  text-align: left;
  background: #f8f9fa;
  border-radius: 0.25rem;
  z-index: 1;
  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.23);
}

.dropdown-item {
  display: block;
  padding: 0.25rem 1rem;
  white-space: nowrap;
}

.d-block {
  display: block
}

<div class="dropdown">
  <button data-toggle="dropdown" data-target="#test" class="btn btn-success">Dropdown</button>
  <div id="test" class="dropdown-menu"><a class="dropdown-item">Item</a><a class="dropdown-item">Item</a></div>
</div>
<div class="dropdown">
  <button data-toggle="dropdown" data-target="#test1" class="btn btn-success">Dropdown</button>
  <div id="test1" class="dropdown-menu"><a class="dropdown-item">Item</a><a class="dropdown-item">Item</a></div>
</div>

Answer 2

document.querySelector() 只会 return 找到的第一个元素；来自 documentation:

Returns the first Element within the document that matches the specified selector, or group of selectors, or null if no matches are found.

我会尝试 document.querySelectorAll()，因为这似乎是您想要的。来自 documentation:

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

具有数据属性的多个下拉切换

Multiple dropdown toggle with data attribute

html

javascript

custom-data-attribute

drop-down-menu

编辑