单击多个按钮以在同一位置打开下拉菜单

Question

我是一名网络开发人员。现在我正在开发我的新项目，但我遇到了问题。我创建了一个电子书查看器列表。这里有一些问题。包括一些按钮，例如[下载、批量下载、保存到库和“更多”]。一切都很好，但 [更多] 按钮无法正常工作。

我希望通过单击 [更多] 图标来创建我所有书籍的列表，以便可以在正确的位置看到 [更多] 按钮列表。

第一个列表工作正常，但我已经列出了其他电子书查看器。它无法正常工作。点击[更多]按钮打开第一个图书列表按钮。

我需要专家开发人员的帮助。这是我的项目截图和源代码

view screenshot

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

Answer 1

您好@Sajjad Hosen 这可能为时已晚。但是因为还有其他人想要这些问题的答案，所以我会投入两分钱的价值。初学者到初学者。

你有两个缺点。首先是您对所有四个菜单按钮使用相同的id ("myDropdown")。然后浏览器引擎找到第一个，就是这样。这就是为什么它总是打开第一个子菜单。

第二个：是你的函数myFunction有缺陷：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

这将始终找到与id 相同的元素（假设在 DOM 中只有一个）。您需要使用this 关键字来引用被点击的元素。所以你的按钮现在看起来像：

<button onclick="myFunction(this)" class="dropbtn">Dropdown</button>

您将单击的元素作为参数传递。

现在，您必须遍历 "myDropdown" 元素，因为 this 指的是按钮而不是菜单。

function myFunction(el) {
  el.nextSibling.nextSibling.classList.toggle("show");
  console.log(el);
}

如您所见，您的函数现在使用el 作为参数。我们需要使用两个.nextSibling 属性。在您的情况下，您将</button> 结束标记和下一个<div> 标记与空格（新行）分开。这被视为文本，被视为 DOM 中的新元素。只有下一个 .nextSibling 属性最终会获取您的菜单元素。

有些人宣传标签的这种用法：</button><div>。然后标签就在一起了。

我倾向于使用 CSS 制作尽可能多的前端代码。所以也许我可以提出我的解决方案。虽然有区别。这里我只显示一个菜单按钮。在您的解决方案中单击后，子菜单保持打开状态。在我的解决方案中，只要光标悬停在下拉按钮及其菜单上方，它就存在。不过对于那些将扩展更多按钮的解决方案的人的警告：您还应该更改元素的 id。

如果有人发现我的解决方案存在缺陷，我很乐意听取他们的意见。

.wrapper {
  position: absolute;
  width: 20%;
  font-family: Arial, Helvetica, sans-serif;
}

#menubutton {
  z-index: 1;
  opacity: 0.99;
  position: absolute;
  top: 5vh;
  width: 100%;
  background-color: green;
  color: white;
  text-align: center;
  padding: 1em 0em;
  cursor: pointer;
  height: 1.25em;
  border-radius: 0.3125em;
}

#menu {
  z-index: 0;
  opacity: 0.99;
  position: absolute;
  left: 0em;
  top: 5vh;
  text-align: center;
  width: 100%;
  height: 1.25em;
  background-color: transparent;
  color: #fff;
  padding: 0;
  transition: height 1s;
  border-radius: 0.3125em;
  overflow: hidden;
}

.rows {
  position: absolute;
  width: 100%;
  height: 1.25em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 1em 0em;
  border-radius: 0.6125em;
  background-color: green;
  cursor: pointer;
}

#menuItem1 {
  bottom: 7.2em;
}

#menuItem2 {
  bottom: 3.6em;
}

#menuItem3 {
  bottom: 0em;
}

#menubutton:hover+#menu,
#menu:hover {
  height: 14.0em;
}

<div class="wrapper">
  <div align="center " id="menubutton">Dropdown
  </div>
  <div id="menu">
    <div class="rows" id="menuItem1">Home</div>
    <div class="rows" id="menuItem2">About</div>
    <div class="rows" id="menuItem3">Contact</div>
  </div>
</div>