移动端JavaScript下拉菜单二级菜单无法展开技术求助

Hey there! Let's troubleshoot why your secondary mobile dropdown isn't working. From the code snippet you shared, you've got the first part right—adding the toggle icons to parent menu items—but we're missing the critical click event handling to trigger those secondary menus, plus we need to account for nested items properly.

Common Issues & Fixes #

First, let's address the core problem: dynamic elements (like the .open-menu icons you're appending) need event delegation to work, and we have to prevent event bubbling so clicking a secondary toggle doesn't mess with the parent menu.

Updated JavaScript Code #

Here's your code with the missing click handling added, plus improvements for nested menus:

$(document).ready(function () { 
  // 为所有包含子项的列表项添加加号图标 
  $('#mobile-nav .parent').append('<span class="open-menu fa fa-angle-down"></span>'); 

  // 保留你原来的"修复移动端非滚动溢出问题"的代码在这里

  // 使用事件委托处理动态添加的菜单图标点击
  $(document).on('click', '.open-menu', function(e) {
    // 阻止事件冒泡，避免触发父级菜单的点击事件
    e.stopPropagation();
    
    // 获取当前点击的父列表项和对应的子菜单
    const $parentItem = $(this).closest('.parent');
    const $subMenu = $parentItem.find('.sub-menu');
    
    // 切换子菜单的显示状态
    $subMenu.toggleClass('open');
    // 切换图标方向，给用户清晰的交互反馈
    $(this).toggleClass('fa-angle-down fa-angle-up');
  });

  // 可选：点击菜单外部自动关闭所有展开的菜单
  $(document).on('click', function(e) {
    if (!$(e.target).closest('#mobile-nav').length) {
      $('#mobile-nav .sub-menu.open').removeClass('open');
      $('#mobile-nav .open-menu').removeClass('fa-angle-up').addClass('fa-angle-down');
    }
  });
});

Required CSS Adjustments #

You'll also need some CSS to handle the default hidden state and smooth transitions for the submenus:

/* 默认隐藏二级菜单 */
#mobile-nav .sub-menu {
  display: none;
  padding-left: 1.2rem; /* 缩进二级菜单，提升层级感 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out; /* 平滑展开/收起动画 */
}

/* 展开时显示二级菜单 */
#mobile-nav .sub-menu.open {
  display: block;
  max-height: 600px; /* 根据你的菜单内容高度调整 */
}

/* 让图标看起来可点击 */
.open-menu {
  margin-left: auto;
  cursor: pointer;
  display: inline-block;
  padding: 0 0.5rem;
}

Key Explanations #

• Event Delegation: Using $(document).on('click', '.open-menu', ...) ensures the click event works even for icons added dynamically after the page loads—direct .click() binding would miss these elements.
• Stop Propagation: e.stopPropagation() prevents clicking a secondary menu toggle from triggering the parent menu's toggle, which would cause unexpected menu closures.
• Toggle Classes: toggleClass() simplifies switching between hidden/visible states for both the submenu and the icon, making the code clean and reusable.
• Smooth Transitions: The max-height transition gives the menu a polished, animated feel instead of a jarring show/hide.

Quick Checks Before Testing #

1. Make sure your secondary menus use the .sub-menu class (adjust the selector if you're using a different class name).
2. Confirm Font Awesome is properly loaded on your page so the angle icons display.
3. Check for conflicting JavaScript that might be overriding click events on your menu.

内容的提问来源于stack exchange，提问作者Taylor Parker