Question

好吧，这个问题起初听起来很奇怪，但是还不算太糟。我想要一个带有多个子菜单的垂直菜单。香港专业教育学院尝试与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;}

理想的菜单是，您只能打开一个子菜单，如果再次单击该子菜单，则可以将其关闭（取消选中输入）。

Answer 1

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

我的建议是重构代码，以便只有一个window.onclick处理程序可同时在两个菜单上正常工作。

此外，覆盖此均匀处理程序也是个坏主意，最好使用document.addEventListener()。

Answer 2

避免 on-event attribute

<button ~~onclick =“ namedFunction（）”~~ ></button>
使用事件属性或.addEventListener()

document.querySelector("button").onclick = namedFunction document.querySelector("button").addEventListener("click", namedFunction)
我有多个相同的目标（HTML布局，CSS样式，JavaScript行为等），
- 使用类避免ID。
- 找到所有目标共同拥有的祖先元素。尽管“窗口和文档”可以被认为是共同的祖先，但请尝试寻找最接近目标的对象。侦听关键事件时，通常使用引用窗口或文档。
- 一旦找到祖先，请将其注册到事件中。祖先不仅会自己监听已注册的事件，还会监听在其任何后代元素上触发的事件。无需将每个元素注册到一个事件，并且所涵盖的后代数量几乎是无限的。
- 要确定并隔离实际单击，更改，悬停等的元素，请使用事件属性 event.target 。

所描述的编程模式是 Event Delegation 的主要部分。

const main = document.querySelector('main');

main.onclick = ddAccordion;

function ddAccordion(e) {
  const clicked = e.target;
  const triggers = document.querySelectorAll('.trigger');

  if (clicked.matches('.trigger')) {
    if (clicked.matches('.show')) {
      for (let t of triggers) {
        t.classList.remove('show');
      }
    } else {
      for (let t of triggers) {
        t.classList.remove('show');
      }
      clicked.classList.add('show');
    }
  }
  return false;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

.trigger {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 100%;
}

.trigger:hover,
.trigger:focus {
  background-color: #2980B9;
  outline: 0;
}

.dropdown {
  width: 100%;
}

.content {
  background-color: #f1f1f1;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.75s ease 0s;
}

.show+.content {
  max-height: 500px;
  height: auto;
  overflow: auto;
  transition: max-height 1.15s ease 0s;
}

.content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.content a:hover {
  background-color: #ddd;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style></style>
</head>

<body>
  <main>
    <section class="dropdown">
      <button class="trigger">Dropdown 1</button>
      <address class="content">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </address>
    </section>
    <section class="dropdown">
      <button class="trigger">Dropdown 2</button>
      <address class="content">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </address>
    </section>
    <section class="dropdown">
      <button class="trigger">Dropdown 3</button>
      <address class="content">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </address>
    </section>
  </main>
  <script></script>
</body>

</html>

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

2 个答案: