JavaScript实现动态下拉子菜单：精准控制显示与隐藏

轻磊小哥_2436

发布时间：2025-11-10 11:13:01

968人浏览过

来源于php中文网

原创

JavaScript实现动态下拉子菜单：精准控制显示与隐藏

本教程旨在解决动态下拉菜单中一个常见问题：点击父级菜单项时，错误地显示所有子菜单。它将演示如何利用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函数。这样，函数就能根据这个参数定位到其对应的子菜单。

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

核心思路

解决方案的核心在于利用this关键字和DOM的nextElementSibling属性。

传递this： 在HTML的onclick事件中，将this关键字作为参数传递给subMenu函数。this在事件上下文中指向当前被点击的HTML元素。
使用nextElementSibling： 在subMenu函数内部，通过接收到的clickedElement参数，使用clickedElement.nextElementSibling属性来获取紧邻被点击元素的下一个兄弟元素。由于我们的HTML结构设计是将子菜单容器紧跟在父菜单项之后，这个兄弟元素就是我们想要操作的子菜单。

HTML 结构调整

在调用subMenu函数时，将this作为参数传入，以传递被点击的元素引用。

<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元素的紧邻兄弟关系。如果子菜单容器不是父菜单项的直接下一个兄弟元素，例如中间插入了其他
或文本节点，则nextElementSibling将无法正确获取到目标元素。在这种情况下，可能需要使用closest()结合querySelector()或nextAll()等更灵活的DOM遍历方法。
事件委托： 对于包含大量菜单项的复杂菜单，为每个菜单项单独绑定onclick事件可能导致性能问题。更优的实践是使用事件委托

React 中 Checkbox 事件不触发的常见原因与正确用法

如何让输入值与删除按钮并排显示在同一行

Bootstrap 5 中正确高亮激活导航项（nav-link）的完整解决方案

如何仅用 CSS Flexbox 精确布局左右分栏与上下分区的响应式容器

如何正确自定义 Bootstrap 导航栏（Navbar）的样式