当事件按钮从其他位置动态显示时，如何使事件侦听器响应唯一的按钮

Question

我在获取单个功能来控制按钮上的下拉菜单时遇到了一些麻烦。单击第一个按钮时，将显示下拉列表，但是，当添加第二个按钮并单击该按钮时，下拉菜单对应于第一个按钮。

当用户单击“购买”时，我会动态添加按钮，因此我无法创建与每个按钮相对应的多个函数或变量。

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

Answer 1

这是找到同级类并切换它，以便您可以重用您的函数。/* When the user clicks on the button,&nbsp;toggle between hiding and showing the dropdown content */function myFunction(element) {for (var i = 0; i < element.parentNode.childNodes.length; i++) {classname=element.parentNode.childNodes[i].className;&nbsp; if (!classname) continue;&nbsp; &nbsp; if (classname.includes("dropdown-content")) {&nbsp; element.parentNode.childNodes[i].classList.toggle("show");&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}}// Close the dropdown if the user clicks outside of itwindow.onclick = function(event) {&nbsp; if (!event.target.matches('.dropbtn')) {&nbsp; &nbsp; var dropdowns = document.getElementsByClassName("dropdown-content");&nbsp; &nbsp; var i;&nbsp; &nbsp; for (i = 0; i < dropdowns.length; i++) {&nbsp; &nbsp; &nbsp; var openDropdown = dropdowns[i];&nbsp; &nbsp; &nbsp; if (openDropdown.classList.contains('show')) {&nbsp; &nbsp; &nbsp; &nbsp; openDropdown.classList.remove('show');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}.dropbtn {&nbsp; background-color: #3498DB;&nbsp; color: white;&nbsp; padding: 16px;&nbsp; font-size: 16px;&nbsp; border: none;&nbsp; cursor: pointer;}.dropbtn:hover, .dropbtn:focus {&nbsp; background-color: #2980B9;}.dropdown {&nbsp; position: relative;&nbsp; display: inline-block;}.dropdown-content {&nbsp; display: none;&nbsp; position: absolute;&nbsp; background-color: #f1f1f1;&nbsp; min-width: 160px;&nbsp; overflow: auto;&nbsp; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);&nbsp; z-index: 1;}.dropdown-content a {&nbsp; color: black;&nbsp; padding: 12px 16px;&nbsp; text-decoration: none;&nbsp; display: block;}.dropdown a:hover {background-color: #ddd;}.show {display: block;}<div class="dropdown">&nbsp; <button onclick="myFunction(this)" class="dropbtn">Dropdown</button>&nbsp; <div class="dropdown-content">&nbsp; &nbsp; <a href="#home">menu 1</a>&nbsp; &nbsp; <a href="#about">About</a>&nbsp; &nbsp; <a href="#contact">Contact</a>&nbsp; </div></div><div class="dropdown">&nbsp; <button onclick="myFunction(this)" class="dropbtn">Dropdown</button>&nbsp; <div class="dropdown-content">&nbsp; &nbsp; <a href="#home">menu 2</a>&nbsp; &nbsp; <a href="#about">About</a>&nbsp; &nbsp; <a href="#contact">Contact</a>&nbsp; </div></div>