时间戳

首页 > 解决方案 > 当我单击另一个功能时，如何使按钮单击事件发生？

javascript - 当我单击另一个功能时，如何使按钮单击事件发生？

问题描述

好吧，这个问题起初听起来很奇怪，但还不错。我想要一个带有多个子菜单的垂直菜单。我首先尝试使用 css 和复选框，因为我想单击菜单以显示子菜单而不是悬停。没有找到正确的解决方案。现在我在 w3 上找到了一些东西，但它仍然无法正常工作，因为我打算让它工作。单击时打开子菜单，但如果我单击另一个具有相同脚本（但类和 ID 不同）的按钮，它们都会保持打开状态。（如果你先打开底部，另一个让它关闭，但它只发生在底部..） https://jsfiddle.net/8vsbe5w3/

HTML

<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="dropdown2">
  <button onclick="myFunction2()" class="dropbtn2">Dropdown</button>
  <div id="myDropdown2" class="dropdown-content2">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
/* 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');
      }
    }
  }
}

/* ---------------------------------------------------------- */
function myFunction2() {
  document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn2')) {
    var dropdowns = document.getElementsByClassName("dropdown-content2");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

CSS

.dropdown-content, .dropdown-content2{
  display: none;}
.show {display: block;}

我理想的菜单会让你只打开一个子菜单，如果你再次点击它就可以关闭它（取消选中输入）。

标签： javascripthtmlcss

解决方案

您将window.onclick属性设置两次，因此您将覆盖第一个。这就是为什么当您打开第一个菜单然后打开第二个菜单时，第一个菜单保持打开状态 - 因为第一个菜单window.onclick不再存在。

我的建议是重构代码，这样你就只有一个window.onclick处理程序可以通用地用于两个菜单。

覆盖这个偶数处理程序也是一个坏主意，更好地使用document.addEventListener().

推荐阅读