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

程序猿 • 2025年12月23日 08:41:33 • 用户投稿

本教程旨在解决动态下拉菜单中一个常见问题：点击父级菜单项时，错误地显示所有子菜单。它将演示如何利用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          A.1    
    B          B.1    
    C    D    E    F    G

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  - 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整合在一起，形成一个完整可运行的示例：

动态下拉子菜单示例/* 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;}/* 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;}        A          A.1    
    B          B.1    
    C    D    E    F    G  
/* 当用户点击主菜单按钮时，切换显示/隐藏主下拉内容 */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');      }    }  }}

注意事项与扩展

DOM 结构依赖： nextElementSibling方法高度依赖于HTML元素的紧邻兄弟关系。如果子菜单容器不是父菜单项的直接下一个兄弟元素，例如中间插入了其他

或文本节点，则nextElementSibling将无法正确获取到目标元素。在这种情况下，可能需要使用closest()结合querySelector()或nextAll()等更灵活的DOM遍历方法。事件委托： 对于包含大量菜单项的复杂菜单，为每个菜单项单独绑定onclick事件可能导致性能问题。更优的实践是使用事件委托

以上就是JavaScript实现动态下拉子菜单：精准控制显示与隐藏的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1593579.html

ai app css css样式 html html元素 java javascript js ssl win 常见问题

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

如何使用 current-device 模块实现精确的条件CSS样式控制

上一篇 2025年12月23日 08:41:27

React Native SVG路径缩放指南：理解ViewBox与内容适配

下一篇 2025年12月23日 08:41:43

用户投稿

豆包AI如何调用外部API 实现AI与第三方服务联动的方法

本文旨在探讨豆包AI如何通过调用外部API，从而实现与第三方服务的智能联动。我们将详细介绍实现这一功能的核心原理以及具体的操作步骤。通过理解API调用的机制并在豆包AI中进行相应的配置，用户可以赋予豆包AI连接互联网世界、获取实时信息、执行特定任务的能力，极大地扩展了AI的应用场景和智能化水平。文章…

程序猿
2026年9月25日
0000
动态缓存键配置：Spring Boot 缓存管理的灵活应用

在 Spring Boot 应用中，使用 @Cacheable 注解可以方便地实现缓存功能。然而，在某些场景下，我们需要根据请求参数动态地生成缓存键，而不是简单地使用固定的键值。虽然 @Cacheable 注解允许通过 key 属性指定 SpEL 表达式来生成缓存键，但有时我们可能需要更灵活的控制，…

程序猿
2026年9月25日 • 用户投稿
2000
p5.js WebGL性能优化：首帧渲染耗时长的原因与对策

在使用p5.js的WEBGL渲染模式时，首次调用image()函数渲染图片或p5.Graphics对象通常会比后续调用耗时显著增加。这主要是因为第一次渲染时，p5.js需要将图像数据从CPU内存上传到GPU的纹理内存中，涉及内存分配和数据复制，这是一个相对耗时的过程。后续调用由于纹理已被缓存，可以直…

程序猿
2026年9月25日 • 用户投稿
7000
Chrome浏览器怎么把所有标签页加入书签_一键收藏全部打开的标签页

1、使用Ctrl+Shift+D可将当前所有标签页一键保存为书签文件夹；2、通过安装“Save All Tabs”等扩展程序实现选择性保存或导出链接；3、手动拖拽标签至书签栏后，利用书签管理器归类整理。如果您在Chrome浏览器中打开了多个需要长期保存的网页标签，手动逐一收藏会非常耗时。通过特定操…

程序猿
2026年9月25日 • 用户投稿
2000
用户投稿

为什么不同浏览器对硬件加速的实现存在差异？

不同浏览器因渲染引擎、图形API及权衡策略差异导致硬件加速表现不同。1. Blink、Gecko、WebKit引擎在图层管理与GPU任务分配上设计不同；2. 各浏览器通过ANGLE等抽象层适配DirectX、Vulkan、Metal，转换开销与支持程度影响性能；3. 厂商在性能、兼容性、稳定性间取舍…

程序猿
2026年9月25日
1000
这台五万元的相机，哈苏想卖给「普通人」

拍照，可能是这个时代门槛最低的创作行为了。我们每天都在生产和消费着海量的图片，记录变得前所未有地容易，但容易，就等于好吗？过去，哈苏的答案是倾向于「好」，但代价是「难」——你需要理解光圈、快门，要背着沉重的三脚架，甚至要在特定的拍摄环境中，才能驾驭这份极致的画质。在推出了备受瞩目的 X2D 1…

程序猿
2026年9月25日 • 用户投稿
2000
用户投稿

豆包是否可以本地部署自主可控环境下运行豆包的技术路径说明

本文旨在解答关于豆包是否可以在本地环境下进行部署并实现自主可控运行的问题。目前，豆包主要以云服务形式提供，用户通过网络访问其功能。要在自主可控的环境下运行类似的大型语言模型能力，通常需要采用不同的技术路径，即在本地计算资源上部署可用的AI模型。本文将概述实现本地自主可控AI运行的通用技术路线和关键步…

程序猿
2026年9月25日
3000
荣耀 300 系列系统升级，后续多款新机待发

日前，荣耀 300 系列手机迎来 magicos 9.0.0.187 版本升级，此次更新带来了清理建议、ai 通话等多项新功能，系统升级将以分批推送的形式逐步覆盖用户。本次更新的主要亮点如下：图库方面新增“清理建议”功能，可智能识别重复照片、相似图片及超大视频，帮助用户更高效地管理存储空间；通…

程序猿
2026年9月25日 • 用户投稿
5000
动态缓存键在Spring Boot中的实现教程

本文介绍了如何在Spring Boot应用中实现基于请求参数的动态缓存键。通过直接操作CacheManager获取缓存对象，并使用cache.get(key, () -> …)方法，可以灵活地根据请求参数生成缓存键，从而实现更精细化的缓存控制。这种方法避免了直接修改缓存名称，而是专…

程序猿
2026年9月25日 • 用户投稿
7000
win11事件查看器在哪里打开_win11事件查看器打开路径介绍

答案：可通过五种方式打开Windows 11事件查看器。依次为：开始菜单搜索“事件查看器”或eventvwr；使用Win+R运行eventvwr.msc；右键“此电脑”进入计算机管理并选择事件查看器；按Win+X后选事件查看器；通过控制面板的管理工具双击启动。如果您需要排查系统故障或查看计算机的运…

程序猿
2026年9月25日 • 用户投稿
0000
sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置

首先安装SublimeLinter和SublimeLinter-eslint插件，确保系统或项目中已安装ESLint；通过npx eslint –init生成配置文件；插件会自动调用项目内的eslint，若未识别可手动设置executable路径；保存JavaScript文件时即可实时显…

程序猿
2026年9月25日 • 用户投稿
0000
firefox浏览器怎么截图整个网页 Firefox浏览器滚动长截图功能使用教程

Firefox可通过内置截图工具截取长网页，点击菜单选择“截图”或使用Ctrl+Shift+S，再点“截取整页”即可保存完整页面。如果您在浏览网页时需要保存完整页面内容，但Firefox默认仅截取当前可见区域，则可以通过内置的截图工具扩展功能实现全页截图。以下是具体操作方法：本文运行环境：Del…

程序猿
2026年9月25日 • 用户投稿
0000
用户投稿

PHP加密算法有哪些_PHP数据加密解密常用函数

推荐使用password_hash()存储密码，openssl_encrypt()加密数据，RSA实现安全通信，根据场景选择合适加密方式保障信息安全。在PHP开发中，数据加密和解密是保障信息安全的重要手段。根据使用场景的不同，可以选择不同的加密方式。常见的需求包括密码存储、敏感数据传输、配置文件加…

程序猿
2026年9月25日
0000
用户投稿

PHP文件引入时参数传递机制详解与最佳实践

在php中，直接通过url查询字符串方式向`require`或`include`引入的文件传递参数是无效的，这会导致“未定义变量”错误。本文将深入探讨php文件引入的原理，并提供三种正确的参数传递方法：利用作用域共享、手动填充`$_get`数组，以及推荐的通过函数或类进行封装，旨在帮助开发者构建更健…

程序猿
2026年9月25日
0000
win10怎么彻底关闭快速启动功能

有的用户在完成win10系统的安装后，想要再次进入bios设置界面，却发现无法顺利进入。这是因为在win10中启用了全新的快速启动机制，导致开机时直接跳转至系统界面，而不会显示主板自检画面。因此，我们只需关闭该功能即可正常进入bios。操作步骤：方法一：打开“开始菜单”，点击其中的“设置”图标…

程序猿
2026年9月25日 • 用户投稿
2000
sublime怎么设置字体和字号 _sublime字体与字号调整方法

先修改用户设置文件以调整字体和字号，打开Preferences → Settings，在右侧User配置中添加”font_face”和”font_size”选项，如{“font_face”: “Fira Code&#…

程序猿
2026年9月25日 • 用户投稿
0000
Safari浏览器怎么查看网页源代码_Safari浏览器网页HTML源代码查看方式

首先启用Safari开发菜单，然后通过菜单命令或快捷键Option+Command+U查看完整HTML源代码；也可右键选择检查元素，使用Web检查器查看特定区域的DOM结构与样式信息。如果您在浏览网页时需要检查页面的结构或调试内容，查看网页源代码是一个常用的方法。Safari浏览器提供了多种方式来…

程序猿
2026年9月25日 • 用户投稿
0000
Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素

本文将详细介绍如何使用 Java 8 的 Stream API 将一个嵌套的 Map 结构进行扁平化处理，并从中提取所需的数据。具体来说，我们将把 Map<Integer, Map<String, List>> 转换为 Map，其中新 Map 的键是原内部 Map 的键，值…

程序猿
2026年9月25日 • 用户投稿
12000
惠普电脑如何进入安全模式

在日常维护计算机时，我们有时需要进入安全模式来进行一些检查和修复工作，以解决系统出现的问题。不过，对于一些使用惠普电脑的用户来说，可能并不清楚如何让惠普电脑进入安全模式。接下来，小编将为大家介绍几种惠普电脑进入安全模式的方法，这里以windows 10为例。方法一：按下Windows徽标键+R，…

程序猿
2026年9月25日 • 用户投稿
1000
首个对话式音乐创作 Agent“Tunee”正式公测

趣丸科技旗下天谱乐团队自主研发的国内首款对话式音乐创作agent“tunee”近日正式启动全球公测，全面向公众开放使用。据悉，用户只需通过自然语言描述自己的音乐设想，即便表达模糊，Tunee也能自动完成需求解析、方案设计到实际作曲的完整流程，最终输出契合用户意图的原创音乐作品。 Tunee采用先进…

程序猿
2026年9月25日 • 用户投稿
5000