Question

我有一个代码（下面的代码段），但我无法弄清楚为什么在点击按钮时，它只显示第一个下拉菜单。点击第二个按钮时，它什么也没做。

有什么想法吗？

谢谢

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

document.querySelector()只返回找到的第一个元素;来自documentation：

返回文档中与指定选择器或选择器组匹配的第一个Element，如果未找到匹配项，则返回null。

我会尝试document.querySelectorAll()，因为它似乎是你想要的。来自documentation：

返回文档中的元素列表（使用与指定选择器组匹配的文档节点的深度优先预先遍历遍历）。返回的对象是NodeList。

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

2 个答案:

修改