如何使用ul创建二级导航菜单？附Codepen实现代码

首先得说，你用ul标签搭建导航的思路很符合语义化标准，基础框架已经搭得不错了！不过从交互体验、代码健壮性和可维护性来看，还有不少可以优化和完善的地方，我来给你拆解一下：

一、现有代码的优化点 #

1. CSS样式层面 #

• 补全未完成的样式：你写的.navbar ul li a里text-decoration: n...应该是text-decoration: none;，建议再加上文字颜色（比如color: #333;），避免继承默认链接样式影响美观。
• 优化盒模型：给.navbar ul li a加上box-sizing: border-box;，这样你设置的width: 89%加上padding: 5% 0 5% 10%就不会超出父元素宽度，避免布局错位。
• 增加交互反馈：给菜单li添加hover效果，比如.navbar ul li:hover { background: #ddd; }，让用户知道当前可交互；子菜单展开可以用CSS过渡动画代替生硬的显示隐藏，比如把display: none改成max-height: 0; overflow: hidden; transition: max-height 0.3s ease;，然后给.active类设置max-height: 500px;（值大于子菜单实际高度即可），这样展开收起会更流畅。
• 语义化样式控制：把JS里的show()/hide()去掉，完全用CSS的active类控制显示，比如.navbar ul .active { display: block; }（如果用过渡的话就用max-height），让样式和逻辑分离，更易维护。

2. JavaScript逻辑层面 #

• 增加折叠功能：现在的代码点击菜单项只会展开新的子菜单，无法折叠已经展开的。可以加个判断：

  $('.navbar').on('click', '.a-node', function() {
    const $targetUl = $(this).siblings('ul');
    const isActive = $targetUl.hasClass('active');
    
    // 先收起所有展开的子菜单
    $('.navbar .active').removeClass('active');
    
    // 如果当前目标没激活，就展开它
    if (!isActive) {
      $targetUl.addClass('active');
    }
  });
  

• 使用事件委托：把事件绑定在父元素.navbar上而不是直接绑定.a-node，这样后续动态添加的菜单项也能触发点击事件，代码更健壮。
• 减少DOM查询：避免重复查询.active，可以用更精确的选择器，比如$(this).closest('li').siblings().find('.active')，只操作当前菜单相关的节点，提升性能。

二、功能完善方向 #

• 支持多级菜单：当前代码只支持二级菜单，修改逻辑让它适配更深层级，比如用递归或者通用选择器找到当前点击元素的直接子ul，而不是只找兄弟节点。
• 无障碍键盘导航：给菜单项添加tabindex="0"，监听keydown事件，支持回车或空格键触发菜单展开/折叠，让键盘用户也能正常使用。
• 响应式适配：在移动端把导航改成汉堡菜单样式，点击汉堡图标展开/收起整个导航栏，提升小屏幕体验。
• 页面跳转后保持高亮：根据当前页面的URL，自动匹配对应的菜单项并设置为active状态，同时展开对应的子菜单，让用户清楚当前所在位置。
• 点击外部关闭菜单：监听document的点击事件，当点击菜单以外的区域时，自动收起所有展开的子菜单，提升交互体验。

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