本教程旨在解决动态下拉菜单中一个常见问题：点击父级菜单项时，错误地显示所有子菜单。它将演示如何利用javascript的nextelementsibling属性，精准控制单个子菜单的可见性，确保仅显示与所点击父级项对应的子菜单，且无需大幅改动现有html结构。
引言
在现代Web应用中，下拉菜单是常见的交互元素，尤其当需要展示层级结构的内容时。一个常见的需求是实现带有子菜单的下拉菜单，即点击主菜单项后，只显示其对应的子菜单。然而，开发者在实现过程中常会遇到一个问题：无论点击哪个主菜单项，所有的子菜单都会同时显示。本教程将深入探讨这一问题，并提供一个高效且易于理解的解决方案。
问题分析
最初的实现尝试通常涉及一个JavaScript函数，该函数通过循环遍历所有预定义的子菜单ID来切换它们的显示状态。例如，如果存在subMenu1和subMenu2两个子菜单，点击任何主菜单项都会触发一个循环，导致subMenu1和subMenu2都被切换显示。
以下是导致该问题的典型JavaScript代码片段：
function subMenu() {
for (var i = 1; i <= 2; i++) {
document.getElementById("subMenu" + i).classList.toggle("show");
}
}这段代码的问题在于，它缺乏上下文信息来区分哪个主菜单项被点击，从而无法仅针对性地操作其对应的子菜单。for循环无差别地遍历并操作所有子菜单，导致了“打开所有子菜单”的 undesired 行为。
立即学习“Java免费学习笔记（深入）”；
解决方案
为了实现对单个子菜单的精准控制，我们需要在事件触发时，将当前被点击的元素作为参数传递给JavaScript函数。这样，函数就能根据这个参数定位到其对应的子菜单。
核心思路
解决方案的核心在于利用this关键字和DOM的nextElementSibling属性。
- 传递this： 在HTML的onclick事件中，将this关键字作为参数传递给subMenu函数。this在事件上下文中指向当前被点击的HTML元素。
- 使用nextElementSibling： 在subMenu函数内部，通过接收到的clickedElement参数，使用clickedElement.nextElementSibling属性来获取紧邻被点击元素的下一个兄弟元素。由于我们的HTML结构设计是将子菜单容器紧跟在父菜单项之后，这个兄弟元素就是我们想要操作的子菜单。
HTML 结构调整
在调用subMenu函数时，将this作为参数传入，以传递被点击的<a>元素引用。
<div class="dropdown">
<button onclick="mainDropDown()" class="dropbtn">主下拉菜单</button>
<div id="myDropdown" class="dropdown-content">
<!-- 将 this 传递给 subMenu 函数 -->
<a href="#" onclick="subMenu(this)">A</a>
<div class="sub-menu-item" id="subMenu1">
<a href="#">A.1</a>
</div>
<a href="#" onclick="subMenu(this)">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>CSS 样式
CSS样式主要负责定义菜单的默认隐藏状态和显示状态。.sub-menu-item类默认display: none;隐藏子菜单，而.show类则通过display: block;使其显示。
/* 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;}JavaScript 逻辑优化
修改subMenu函数，使其接收一个参数（clickedElement），并利用nextElementSibling来定位并切换子菜单的可见性。
/* 当用户点击主菜单按钮时，切换显示/隐藏主下拉内容 */
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');
}
}
}
}在subMenu函数中，我们增加了对appropriateSubmenu是否存在以及是否包含sub-menu-item类的检查，这增强了代码的健壮性，避免在DOM结构不完全符合预期时出现错误。
完整示例代码
将HTML、CSS和JavaScript整合在一起，形成一个完整可运行的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态下拉子菜单示例</title>
<style>
/* 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;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="mainDropDown()" class="dropbtn">主下拉菜单</button>
<div id="myDropdown" class="dropdown-content">
<a href="#" onclick="subMenu(this)">A</a>
<div class="sub-menu-item" id="subMenu1">
<a href="#">A.1</a>
</div>
<a href="#" onclick="subMenu(this)">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>
<script>
/* 当用户点击主菜单按钮时，切换显示/隐藏主下拉内容 */
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');
}
}
}
}
</script>
</body>
</html>注意事项与扩展
- DOM 结构依赖： nextElementSibling方法高度依赖于HTML元素的紧邻兄弟关系。如果子菜单容器不是父菜单项的直接下一个兄弟元素，例如中间插入了其他<div>或文本节点，则nextElementSibling将无法正确获取到目标元素。在这种情况下，可能需要使用closest()结合querySelector()或nextAll()等更灵活的DOM遍历方法。
- 事件委托： 对于包含大量菜单项的复杂菜单，为每个菜单项单独绑定onclick事件可能导致性能问题。更优的实践是使用事件委托
