javascript - 具有数据属性的多个下拉菜单切换

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

一个简单的解决方案，至于为什么你的代码不起作用，你通过使用querySelector定位单个 dom对象，如下这将获取第一个满足查询要求的 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>