原创投稿
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿

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

本教程详细阐述如何精确控制动态下拉菜单中子菜单的显示与隐藏。针对点击主菜单项时所有子菜单同时弹出的常见问题，我们将通过优化JavaScript事件处理，利用DOM上下文信息（this和nextElementSibling）来确保只有与被点击主菜单项对应的子菜单才会被正确显示或隐藏，从而实现更精细的用户界面交互。

1. 概述与问题背景

在Web开发中，实现带有子菜单的下拉导航是常见的需求。通常，我们希望当用户点击一个主菜单项时，只显示其对应的子菜单，而其他子菜单保持隐藏。然而，一个常见的实现错误是，无论点击哪个主菜单项，所有子菜单都会被同时显示或隐藏。这通常是由于JavaScript事件处理逻辑未能正确区分被点击的元素及其对应的子元素所致。

本教程将从一个典型的错误实现出发，逐步讲解如何通过传递事件源（this）并利用DOM遍历方法（nextElementSibling）来解决这个问题，实现精确控制子菜单的动态显示。

2. 初始HTML与CSS结构

首先，我们定义一个基本的HTML结构，包含一个主下拉菜单和几个带有子菜单的主菜单项。CSS用于定义菜单的外观以及控制元素的显示/隐藏状态。

立即学习“Java免费学习笔记（深入）”；

HTML 结构

    
    A        B        C    D    E    F    G

在这个结构中：

.dropdown 是整个下拉菜单的容器。.dropbtn 是主下拉菜单的触发按钮。#myDropdown 是主下拉菜单的内容容器。 标签代表主菜单项（如 A, B, C）。.sub-menu-item 是子菜单的容器，每个子菜单都紧跟在其对应的主菜单项 标签之后。

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;}/* 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;} /* 用于显示元素的类 */

CSS主要负责：

设置按钮和菜单项的基本样式。通过 display: none; 默认隐藏主下拉菜单内容 (.dropdown-content) 和所有子菜单 (.sub-menu-item)。.show 类用于通过JavaScript切换元素的 display 属性，使其可见。

3. 问题所在：不精确的JavaScript控制

最初的JavaScript代码可能如下所示，它包含一个用于切换主下拉菜单的函数，以及一个尝试切换子菜单的函数。

初始 JavaScript 代码

/* 当用户点击按钮时，切换下拉内容的显示与隐藏 */function mainDropDown() {  document.getElementById("myDropdown").classList.toggle("show");}function subMenu() {  // 这里的循环是问题的根源  for (var i = 1; i <= 2; i++) {      document.getElementById("subMenu" + i).classList.toggle("show");  }}

问题分析：mainDropDown() 函数工作正常，它通过 classList.toggle(“show”) 切换了 #myDropdown 的可见性。然而，subMenu() 函数存在严重问题。它使用一个 for 循环，无论用户点击了哪个主菜单项（例如“A”或“B”），都会遍历并切换所有具有ID subMenu1 和 subMenu2 的子菜单的可见性。这意味着，当你点击“A”时，A.1 和 B.1 都会出现；再次点击“A”时，它们又都会隐藏。这与我们期望的“点击A只显示A.1，点击B只显示B.1”的行为不符。

4. 解决方案：精确控制子菜单显示

要解决上述问题，我们需要让 subMenu 函数知道是哪个主菜单项被点击了，然后只操作该主菜单项对应的子菜单。

核心思路

传递事件源: 在HTML中，当主菜单项被点击时，将当前被点击的元素（this）作为参数传递给 subMenu 函数。定位相邻子菜单: 在 subMenu 函数内部，利用DOM的 nextElementSibling 属性来获取被点击元素紧随其后的同级元素，即其对应的子菜单容器。精确切换: 只对获取到的特定子菜单容器应用 classList.toggle(“show”)。

更新 HTML

首先，修改主菜单项的 onclick 属性，传递 this 关键字。

    
    A         B         C    D    E    F    G

优化 JavaScript

接下来，修改 subMenu 函数，使其接受一个参数 clickedElement，并使用 nextElementSibling。

/* 当用户点击按钮时，切换下拉内容的显示与隐藏 */function mainDropDown() {  document.getElementById("myDropdown").classList.toggle("show");}function subMenu(clickedElement) {  // 获取被点击元素紧随其后的同级元素，即对应的子菜单  let appropriateSubmenu = clickedElement.nextElementSibling;  // 切换该子菜单的显示状态  appropriateSubmenu.classList.toggle("show");}

解释：

clickedElement：这个参数接收了HTML中 onclick=”subMenu(this)” 传递过来的 元素本身。clickedElement.nextElementSibling：这是一个DOM属性，它返回指定元素（即 clickedElement）的下一个兄弟元素。在我们的HTML结构中，主菜单项 的下一个兄弟元素就是其对应的

。appropriateSubmenu.classList.toggle(“show”)：现在，我们只对这个特定的子菜单容器应用 toggle(“show”)，从而实现了精确的控制。

5. 完整代码示例

将更新后的HTML、CSS和JavaScript代码整合，形成一个完整的、功能正确的动态下拉子菜单实现。

HTML

    
    A        B        C    D    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;}/* 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;  appropriateSubmenu.classList.toggle("show");}

6. 注意事项与最佳实践

DOM 结构的重要性: nextElementSibling 依赖于子菜单容器紧跟在其父级链接之后的DOM结构。如果HTML结构发生变化（例如，子菜单被包裹在另一个不相关的 div 中，或者位置不相邻），nextElementSibling 将无法正确找到目标元素。在这种情况下，可能需要使用 parentNode、querySelector 或 closest 等其他DOM遍历方法，结合更具体的选择器或数据属性（data-submenu-id）来定位。事件委托: 对于包含大量菜单项的复杂下拉菜单，为每个菜单项添加 onclick 属性可能导致性能问题和代码冗余。更推荐的做法是使用事件委托，将事件监听器添加到父容器上，然后通过 event.target 判断是哪个子元素触发了事件。

// 示例：使用事件委托document.getElementById("myDropdown").addEventListener("click", function(event) {  const target = event.target;  if (target.tagName === 'A' && target.nextElementSibling && target.nextElementSibling.classList.contains('sub-menu-item')) {    target.nextElementSibling.classList.toggle("show");  }});

无障碍性 (Accessibility): 为了提升用户体验，特别是对于使用屏幕阅读器或键盘导航的用户，建议添加ARIA属性。例如，为可展开的主菜单项添加 aria-haspopup=”true” 和 aria-expanded=”false/true”。CSS 过渡效果: 为了使菜单的显示和隐藏更加平滑，可以在CSS中为 .sub-menu-item 添加 transition 属性，例如 transition: all 0.3s ease-in-out;，并结合 max-height 或 opacity 属性进行动画，而不是直接切换 display。当使用 display: block/none 时，过渡效果通常不会生效，可以考虑使用 visibility 和 opacity 结合 max-height 来实现。关闭其他子菜单: 当前实现只负责切换被点击子菜单的状态。如果需要点击一个主菜单项时，关闭所有其他已打开的子菜单，则需要在 subMenu 函数中增加逻辑，遍历所有 .sub-menu-item 元素并移除它们的 show 类，然后再对当前目标子菜单进行切换。

总结

通过本教程，我们学习了如何利用JavaScript的DOM操作特性，特别是 this 关键字和 nextElementSibling 属性，来精确控制动态下拉菜单中子菜单的显示逻辑。这种方法避免了全局操作所有子菜单的错误，使得用户界面更加直观和响应。同时，我们也探讨了事件委托、无障碍性和CSS动画等最佳实践，以构建更健壮、更用户友好的交互式组件。理解这些核心概念对于开发高质量的Web前端界面至关重要。

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

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
JavaScript定时控制CSS类：实现元素状态的自动恢复
上一篇 2025年12月23日 08:27:29
深入理解Svelte的响应式机制：为何无需useCallback
下一篇 2025年12月23日 08:27:38

相关推荐

  • 天猫怎么看信誉度？天猫怎么看信誉度等级 用户投稿

    天猫怎么看信誉度？天猫怎么看信誉度等级

    可通过查看店铺动态评分、商品评价及店铺星级判断天猫卖家可靠性。首先查看“描述相符”“服务态度”“物流服务”三项评分，高于行业均值为佳；其次浏览商品评价区，重点关注中差评内容及卖家回复情况，判断售后服务态度；最后留意店铺名称旁的星级标识，优先选择四星及以上店铺，综合三项指标可有效评估卖家信誉水平。 如…

    程序猿的头像 程序猿
    2026年8月29日
    000
  • 番茄小说怎么备份书架数据_番茄小说备份书架数据操作指南 用户投稿

    番茄小说怎么备份书架数据_番茄小说备份书架数据操作指南

    1、通过账号同步功能可实现书架数据自动备份，登录同一账号即可在多设备间同步；2、手动导出书架清单至文档并保存至云盘，便于记录与分享阅读内容；3、截图保存书架页面并整理至相册，结合iCloud同步确保数据不丢失。 如果您希望将番茄小说中的书架内容进行备份，以防止数据丢失或在更换设备时能够快速恢复，可以…

    程序猿的头像 程序猿
    2026年8月29日
    000
  • 拼多多商家能取消订单吗？拼多多商家能取消退款吗 用户投稿

    拼多多商家能取消订单吗？拼多多商家能取消退款吗

    答案：拼多多商家取消订单需根据状态选择处理方式。未发货订单可在工作台或APP操作取消；已发货订单须拦截物流并引导买家退款；退款申请不可强制取消，需协商或举证驳回；特殊场景如恶意下单、系统异常等需平台介入。 如果您作为拼多多商家，因库存、物流等原因需要取消已生成的订单或处理买家发起的退款申请，平台允许…

    程序猿的头像 程序猿
    2026年8月29日
    000
  • 《中国足球环境及未来发展白皮书（2025）》发布：100吋大屏电视成标配 用户投稿

    《中国足球环境及未来发展白皮书（2025）》发布：100吋大屏电视成标配

    2025年，世俱杯的激情与“苏超”的热潮遥相呼应，掀起了一场全球范围内的足球盛宴。这份源自赛场内外的热情，不仅展现了足球运动的巨大魅力，也正逐步汇聚成推动中国足球环境改善的重要力量。 7月10日，由经济观察研究院发布的《中国足球环境及未来发展白皮书（2025）》（以下简称《白皮书》）引发广泛关注。该…

    程序猿的头像 程序猿
    2026年8月29日
    000
  • 使用 Java 编码单词：基于字母表的字符映射教程 用户投稿

    使用 Java 编码单词：基于字母表的字符映射教程

    本文档旨在指导开发者如何使用 Java 编程语言，根据预定义的字母表将单词编码为字符序列。我们将详细介绍实现此功能的代码，解释关键步骤，并提供示例代码，确保编码过程能够准确地保留单词的原始顺序。本教程将涵盖字符大小写处理、循环优化以及结果输出等关键方面，帮助读者掌握字符编码的核心技术。 ### 字符…

    程序猿的头像 程序猿
    2026年8月29日
    000
  • 首款搭载海光4号处理器笔记本，联想开天X7定义信创PC旗舰性能 用户投稿

    首款搭载海光4号处理器笔记本，联想开天X7定义信创PC旗舰性能

    北京，2025年7月10日——在今日举行的海光新一代pc处理器发布会上，联想开天作为核心战略合作伙伴，同步发布了一款面向国产信创领域的重磅新品——联想开天x7高性能信创旗舰笔记本。该产品不仅是全球首款配备海光4号处理器的笔记本电脑，更首次在国产笔记本中引入独立npu芯片，标志着国产“信创aipc”迈…

    程序猿的头像 程序猿
    2026年8月29日
    100
  • Dubbo消费者配置中``标签的id属性有什么作用？ 用户投稿

    Dubbo消费者配置中“标签的id属性有什么作用？

    `标签的id属性作用” /> 深入理解Dubbo消费者配置中标签的id属性 在基于Dubbo框架的分布式系统中，消费者配置文件的标签扮演着关键角色，其id属性尤为重要。本文将详细解释中id=”timeservice”的具体作用。 这段配置代码声明了对名为cn.suiwei.serv…

    程序猿的头像 程序猿
    2026年8月29日
    000

  • 如何解决Swagger/OpenAPI规范的管理问题？使用Composer可以轻松搞定！

    可以通过以下地址学习 composer：学习地址 在开发 API 时，管理和操作 Swagger/OpenAPI 规范常常是一项复杂且耗时的任务。我曾在一个项目中遇到过这样的问题：需要频繁地修改和更新 Swagger 文档，手动操作不仅容易出错，还非常低效。最终，我通过 Composer 安装了 e…

    程序猿的头像 程序猿
    用户投稿 2026年8月29日
    000
  • 京东白条首单立减60退货了还能用吗？京东白条首单立减退款的话再买会不会没了 用户投稿

    京东白条首单立减60退货了还能用吗？京东白条首单立减退款的话再买会不会没了

    首单立减60元优惠使用后若退货，优惠不可恢复。首次支付成功即视为已用首单资格，即便全额退款也不重置，再次下单无法享受同优惠；整单退款且券有效期内可能返还，过期或标注不可退则不返；用户可通过京东App“我的优惠券”查看状态，无首单立减券即为失效。 如果您在使用京东白条进行首次消费时享受了立减60元的优…

    程序猿的头像 程序猿
    2026年8月29日
    300
  • 平安好车主如何设置常用目的地_平安好车主设置常用目的地详细方法 用户投稿

    平安好车主如何设置常用目的地_平安好车主设置常用目的地详细方法

    打开平安好车主APP，进入“我的”个人中心，点击头像进入信息管理界面，选择“常驻城市”或“常用地址”，新增并保存如“家”“公司”等地点；2. 使用道路救援或代驾服务时，在下单页输入目的地并勾选“保存为常用地址”，提交后系统自动归类，便于下次快速调用。 如果您希望在平安好车主APP中快速选择经常前往的…

    程序猿的头像 程序猿
    2026年8月29日
    100
  • 百度浏览器兼容模式切换 解决网页显示问题的实用指南 用户投稿

    百度浏览器兼容模式切换 解决网页显示问题的实用指南

    兼容模式可解决百度浏览器访问老旧网站时的显示问题，通过切换至IE内核模拟渲染。2. 网页异常多因历史遗留技术与现代标准不兼容，兼容模式用Trident内核适配旧站，极速模式用Blink内核支持现代网页。3. 布局错乱、功能失效、资源无法加载等现象提示需切换兼容模式，点击地址栏右侧IE图标选择即可。 …

    程序猿的头像 程序猿
    2026年8月29日
    000
  • 完美世界入选“2025高品质消费品牌TOP100”榜单 用户投稿

    完美世界入选“2025高品质消费品牌TOP100”榜单

    7月10日，南方都市报联合广东连锁经营协会发布“2025高品质消费品牌top100”榜单，完美世界股份有限公司成功入选，并荣获“年度十大消费科技创新品牌”奖项，彰显其在高品质兴趣消费领域的引领地位。 在数字经济时代，数字内容产品已成为大众文化精神生活的重要组成部分。以数字游戏、电子竞技、影视作品为代…

    程序猿的头像 程序猿
    2026年8月29日
    000

  • GRUtopia 2.0— 上海 AI Lab 推出的通用具身智能仿真平台

    GRUtopia 2.0— 上海 AI Lab 推出的通用具身智能仿真平台GRUtopia 2.0— 上海 AI Lab 推出的通用具身智能仿真平台GRUtopia 2.0— 上海 AI Lab 推出的通用具身智能仿真平台GRUtopia 2.0— 上海 AI Lab 推出的通用具身智能仿真平台

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 文心智能体平台 百度推出的基于文心大模型的Agent智能体平台，已上架2000+AI智能体 0 查看详情 上海人工智能实验室推出的grutopia 2.0（桃源2.0）是一款功能强大的通用具身智…

    程序猿的头像 程序猿
    2026年8月29日 • 用户投稿
    000

  • TGS2025《如龙极3/如龙3 外传》制作人采访 外传剧情有参考OL

    TGS2025《如龙极3/如龙3 外传》制作人采访 外传剧情有参考OLTGS2025《如龙极3/如龙3 外传》制作人采访 外传剧情有参考OLTGS2025《如龙极3/如龙3 外传》制作人采访 外传剧情有参考OLTGS2025《如龙极3/如龙3 外传》制作人采访 外传剧情有参考OL

    在tgs2025前夕，世嘉如龙工作室举办发布会发表了“极”系列的第三部作品《如龙极3》，而这次最特别是在游戏内还同捆了以反派峰义孝为主角的《如龙3 外传》。这款游戏也在tgs现场提供了最速试玩，此前我们也给大家带来了实机试玩视频。 https://www.bilibili.com/video/BV1…

    程序猿的头像 程序猿
    2026年8月29日 • 用户投稿
    000
  • 拼多多商家能拉黑买家吗？怎么看出商家把我拉黑了 用户投稿

    拼多多商家能拉黑买家吗？怎么看出商家把我拉黑了

    被拉黑后无法发消息或下单，可通过官方客服申诉、提交证据、避免频繁换号等方式解决。 如果您在与拼多多商家沟通时发现消息无法发送或订单互动受限，可能是已被商家加入黑名单。这种情况通常发生在买卖双方出现纠纷或买家存在异常行为时。 本文运行环境：iPhone 15 Pro，iOS 18 一、商家拉黑买家的操…

    程序猿的头像 程序猿
    2026年8月29日
    200

  • 如何解决PHP字符串处理中的多字节字符问题？使用danielstjules/stringy库可以！

    可以通过以下地址学习composer：学习地址 在开发一个支持多种语言的网站时，我遇到了一个令人头疼的问题：php的标准字符串函数在处理多字节字符时表现得不够理想。这不仅影响了文本的正确显示，还导致了性能上的瓶颈。我尝试了各种方法，但效果都不理想，直到我发现了danielstjules/string…

    程序猿的头像 程序猿
    用户投稿 2026年8月29日
    000
  • 《恐怖黎明》新资料片“Fangs of Asterkarn”迄今最大 恐延期到2026年 用户投稿

    《恐怖黎明》新资料片“Fangs of Asterkarn”迄今最大 恐延期到2026年

    《恐怖黎明》全新资料片“fangs of asterkarn”早在两年前便已公布，原定于2024年发布的计划现已确认无法如期实现。开发商crate entertainment最近发布了更新进度，表示该资料片可能将在今年晚些时候上线，但同时也坦言存在延期至2026年春季甚至初夏的可能性。 根据官方介绍…

    程序猿的头像 程序猿
    2026年8月29日
    000
  • MyBatis XML文件中如何正确处理SQL语句中的引号以避免JSON_CONTAINS函数出错？ 用户投稿

    MyBatis XML文件中如何正确处理SQL语句中的引号以避免JSON_CONTAINS函数出错？

    MyBatis XML 文件中 SQL 语句引号处理及 JSON_CONTAINS 函数使用 在使用 MyBatis 等框架操作数据库时，XML 文件中的 SQL 语句引号处理常常令人头疼，尤其是在使用 JSON_CONTAINS 等函数时。本文将通过一个案例，讲解如何正确处理 XML 文件中的 S…

    程序猿的头像 程序猿
    2026年8月29日
    100
  • laravel5源码分析 用户投稿

    laravel5源码分析

    Laravel 5 深入分析揭示了其强大的架构和核心组件：MVC 设计模式、路由、依赖注入、事件、队列和验证。通过分析代码，开发者可以深入了解框架的实现，包括路由定义、控制器处理、模型交互、视图呈现、依赖关系管理、事件系统、异步任务和数据验证。这有助于开发者自定义、扩展框架并解决遇到的问题。 Lar…

    程序猿的头像 程序猿
    2026年8月29日
    100
  • 手机淘宝店铺设置推荐？手机淘宝店铺设置推荐怎么设置 用户投稿

    手机淘宝店铺设置推荐？手机淘宝店铺设置推荐怎么设置

    提升手机淘宝店铺流量和转化率需优化首页推荐设置。首先进入千牛工作台，通过“店铺装修”进入“手机端首页”找到“推荐模块管理”；接着启用智能推荐与人工精选双模式，并设人工商品优先展示；然后在推荐区布局4至6款商品，按爆款与新品3:2比例搭配并定期更新；最后增设750×350像素活动banner和15秒内…

    程序猿的头像 程序猿
    2026年8月29日
    100

发表回复

登录后才能评论
关注微信