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

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 itwindow.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, 

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;

  if (!classname) continue;

    if (classname.includes("dropdown-content")) {

  element.parentNode.childNodes[i].classList.toggle("show");

      break;

    }        

}

}

// 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(this)" class="dropbtn">Dropdown</button>

  <div class="dropdown-content">

    <a href="#home">menu 1</a>

    <a href="#about">About</a>

    <a href="#contact">Contact</a>

  </div>

</div>

<div class="dropdown">

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

  <div class="dropdown-content">

    <a href="#home">menu 2</a>

    <a href="#about">About</a>

    <a href="#contact">Contact</a>

  </div>

</div>