投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

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

程序猿 • • 好文分享 • 阅读 0

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函数。这样，函数就能根据这个参数定位到其对应的子菜单。

核心思路

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

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

HTML 结构调整

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

    
        A        B        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        B        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

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

关于作者

程序猿的头像

程序猿签约作者

400.3K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月23日 08:41:27
下一篇 2025年12月23日 08:41:43

相关推荐

发表回复

登录后才能评论
关注微信