JavaScript实现动态下拉菜单子菜单精准控制教程

添加if (appropriateSubmenu && appropriateSubmenu.classList.contains('sub-menu-item'))判断可以增加代码的健壮性，确保只有当找到的下一个兄弟元素确实是子菜单容器时才进行操作。

3. CSS样式定义

为了使下拉菜单和子菜单能够正确地显示和隐藏，我们需要定义相应的CSS样式。display: none;用于默认隐藏，而display: block;（或flex、grid等，取决于布局需求）则用于显示。

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

/* Dropdown 按钮悬停和焦点状态 */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* Dropdown 容器 */
.dropdown {
  position: relative;
  display: block; /* 使其独占一行或按块级元素布局 */
}

/* Dropdown 内容 (默认隐藏) */
.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;
}

/* Dropdown 内部链接样式 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 子菜单项 (默认隐藏) */
.sub-menu-item{
  display: none; /* 默认隐藏 */
  background-color: #ccc;
  padding-left: 15px; /* 可选：增加缩进以区分层级 */
}

/* Dropdown 链接悬停样式 */
.dropdown-content a:hover {background-color: #ddd}
.sub-menu-item a:hover {background-color: #bbb}

/* 显示类：通过JS添加此class来显示元素 */
.show {display:block;}

这里的关键是.dropdown-content和.sub-menu-item默认都设置为display: none;，而.show类则将其设置为display: block;。JavaScript通过添加或移除.show类来控制元素的可见性。

完整代码示例

将上述HTML、CSS和JavaScript代码整合，即可实现一个功能完善且精准控制的动态下拉子菜单。

HTML:

  Dropdown
  

    A
    

      A.1
      A.2
    
    B
    

      B.1
      B.2
    
    C
    D
    

      D.1
    
    E
    F
    G
  

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 
 - 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;
  padding-left: 15px; /* 可选：增加缩进以区分层级 */
}
/* 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;}

JavaScript:

/* 当用户点击主下拉按钮时，切换主下拉菜单的显示/隐藏状态 */
function mainDropDown() {
  document.getElementById("myDropdown").classList.toggle("show");
}

/* 当用户点击主菜单项时，切换其对应子菜单的显示/隐藏状态 */
function subMenu(clickedElement) {
  // 获取被点击元素（主菜单项）的下一个兄弟元素
  let appropriateSubmenu = clickedElement.nextElementSibling;

  // 确保下一个兄弟元素存在且是子菜单容器，然后切换其显示状态
  if (appropriateSubmenu && appropriateSubmenu.classList.contains('sub-menu-item')) {
    appropriateSubmenu.classList.toggle("show");
  }
}

// 可选：点击菜单外部时关闭所有下拉菜单
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
    // 同时关闭所有打开的子菜单
    var subMenus = document.getElementsByClassName("sub-menu-item");
    for (var i = 0; i < subMenus.length; i++) {
        var openSubMenu = subMenus[i];
        if (openSubMenu.classList.contains('show')) {
            openSubMenu.classList.remove('show');
        }
    }
  }
}

注意事项与最佳实践

1. HTML结构的重要性： nextElementSibling依赖于子菜单容器紧跟在主菜单项之后。如果HTML结构发生变化，例如在和
   之间插入了其他元素，nextElementSibling将不再指向正确的子菜单，需要调整为nextSibling（包含文本节点）或nextElementSibling的链式调用（如nextElementSibling.nextElementSibling）或其他DOM遍历方法（如closest()、querySelector()）。
2. 事件委托（Event Delegation）： 对于大型或动态生成的菜单，直接在每个元素上添加onclick事件可能效率不高。更推荐的做法是使用事件委托，将事件监听器添加到父元素上，然后通过event.target来判断是哪个子元素触发了事件。这可以减少内存占用并简化代码。
3. 可访问性（Accessibility）： 在实际应用中，应考虑键盘导航和屏幕阅读器的支持。例如，使用WAI-ARIA属性（如aria-haspopup、aria-expanded）来增强可访问性。
4. 动画效果： 如果需要更平滑的显示/隐藏效果，可以使用CSS transition属性结合max-height或opacity等属性，而不是直接切换display属性。

总结

通过巧妙地利用JavaScript的this关键字和DOM的nextElementSibling属性，我们可以轻松实现下拉菜单子菜单的精准控制，避免了所有子菜单同时展开的问题。这种方法不仅代码简洁高效，而且易于理解和扩展。在实际开发中，结合对HTML结构、CSS样式的合理设计以及对最佳实践的考量，可以构建出用户体验更佳、功能更强大的交互式下拉菜单。