点击下拉选项时所有子菜单均展开的问题及动态实现需求

问题原因 #

当前subMenu()函数通过循环遍历所有子菜单并执行toggle("show")，导致点击任何触发项时，所有子菜单都会同时切换显示状态，出现A.1和B.1同时展开的问题。

解决方案 #

修改subMenu()函数，不再遍历所有子菜单，而是定位到当前点击项对应的子菜单：

1. 通过event.target获取触发点击的<a>元素
2. 找到该元素的下一个兄弟节点（即对应的.sub-menu-item）
3. 仅切换这个子菜单的显示状态
4. 可选：关闭其他已展开的子菜单，保证同一时间只有一个子菜单展开

修改后的完整代码 #

JavaScript #

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function mainDropDown() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function subMenu() {
  // 获取当前点击的触发元素
  const trigger = event.target;
  // 获取对应的子菜单（触发元素的下一个兄弟节点）
  const targetSubMenu = trigger.nextElementSibling;
  
  // 确认找到的是子菜单元素
  if (targetSubMenu && targetSubMenu.classList.contains('sub-menu-item')) {
    // 可选：关闭其他已展开的子菜单
    document.querySelectorAll('.sub-menu-item.show').forEach(item => {
      if (item !== targetSubMenu) {
        item.classList.remove('show');
      }
    });
    // 切换当前子菜单的显示状态
    targetSubMenu.classList.toggle('show');
  }
}

CSS #

/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sub-menu-item{
  display: none;
  background-color: #ccc;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

.sub-menu-item a:hover {background-color: #bbb}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

HTML #

<div class="dropdown">
  <button onclick="mainDropDown()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#" onclick="subMenu()">A</a>
    <div class="sub-menu-item" id="subMenu1">
    <a href="#">A.1</a>
    </div>
    <a href="#" onclick="subMenu()">B</a>
    <div class="sub-menu-item" id="subMenu2">
    <a href="#">B.1</a>
    </div>
    <a href="#">C</a>
    <a href="#">D</a>
    <a href="#">E</a>
    <a href="#">F</a>
    <a href="#">G</a>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Crimp