为单个用户创建一个 Javascript 下拉列表

Question

我有以下代码可以工作，但仅适用于第一行。即使您单击第三个按钮，它也会引用顶部按钮的信息和位置。我如何告诉Javascript下拉列表应该基于单个用户？(在此示例中，有 3 个用户由其 ID 标识：2160、3550 和 5520(

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
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: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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: #f1f1f1
}
.show {
display:block;
}

<p>Click on the button to open the dropdown menu.</p>
<p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="1-2160.html">1</a>
<a href="2-2160.html">2</a>
<a href="3-2160.html">3</a>
</div>
</div>
</p>
<p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="1-3550.html">1</a>
<a href="2-3550.html">2</a>
<a href="3-3550.html">3</a>
</div>
</div>
</p>
<p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="1-5520.html">1</a>
<a href="2-5520.html">2</a>
<a href="3-5520.html">3</a>
</div>
</div>
</p>

希望这是有道理的。

Answer 1

如注释中所述，您需要为div 提供唯一的 ID。 像myDropDown1，myDropDown2和myDropDown3这样简单的东西就可以了。您还需要修改myFunciton，如下所示：

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

然后，您的html可能如下所示：

<p>Click on the button to open the dropdown menu.</p>
<p>
<div class="dropdown">
<button onclick="myFunction('myDropdown1')" class="dropbtn">Dropdown</button>
<div id="myDropdown1" class="dropdown-content">
<a href="1-2160.html">1</a>
<a href="2-2160.html">2</a>
<a href="3-2160.html">3</a>
</div>
</div>
</p>
<p>
<div class="dropdown">
<button onclick="myFunction('myDropdown2')" class="dropbtn">Dropdown</button>
<div id="myDropdown2" class="dropdown-content">
<a href="1-3550.html">1</a>
<a href="2-3550.html">2</a>
<a href="3-3550.html">3</a>
</div>
</div>
</p>
<p>
<div class="dropdown">
<button onclick="myFunction('myDropdown3')" class="dropbtn">Dropdown</button>
<div id="myDropdown3" class="dropdown-content">
<a href="1-5520.html">1</a>
<a href="2-5520.html">2</a>
<a href="3-5520.html">3</a>
</div>
</div>
</p>

Answer 2

不能有多个元素具有相同的id。如果这样做，则只有文档中找到的第一个文件将由getElementById()返回。因此，您的click处理程序：

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

始终引用第一个按钮。

但是，事实证明，您甚至不需要使用id来解决此问题。

真的，你做得太过分了。

包装div元素的<p>元素是不必要的。它们在语义上不正确。如果您想要它们提供的额外垂直空间，只需为每个div元素添加margin-bottom即可。

现在，您正在内联 HTML 以及window.onclick中设置click事件处理。两者都不应使用。您应该在每个按钮上设置单击事件处理程序，然后在单击每个按钮时，它可以切换其后面的下一个元素的可见性。这将解决您的问题。

最后，您还应该在此处使用ul和li元素，因为您正在制作列表，因此为了语义正确，请在创建列表时使用列表元素。

非常简化和有效的代码是这样的：

function myFunction() {
this.nextElementSibling.classList.toggle("show");
}
// Get all the buttons as an array
var btns = Array.prototype.slice.call(document.querySelectorAll(".dropbtn"));
// Loop through the array and assign click event handlers
btns.forEach(function(btn){
btn.addEventListener("click", myFunction);
});

ul {
list-style:none;
margin:0;
padding:0;
}
li {
display:inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
margin-bottom:1em;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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: #f1f1f1
}
.show {
display:block;
}

<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<ul class="dropdown-content">
<li><a href="1-2160.html">1</a></li>
<li><a href="2-2160.html">2</a></li>
<li><a href="3-2160.html">3</a></li>
</ul>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<ul class="dropdown-content">
<li><a href="1-3550.html">1</a></li>
<li><a href="2-3550.html">2</a></li>
<li><a href="3-3550.html">3</a></li>
</ul>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<ul class="dropdown-content">
<li><a href="1-5520.html">1</a></li>
<li><a href="2-5520.html">2</a></li>
<li><a href="3-5520.html">3</a></li>
</ul>
</div>