jquery二级菜单

jQuery 实现二级菜单的方法

通过 jQuery 实现二级菜单通常涉及事件监听（如 hover 或 click）和 DOM 操作（如 show()/hide() 或 slideToggle()）。以下是两种常见实现方式：

基于 hover 事件的二级菜单

<ul class="main-menu">
  <li>菜单1
    <ul class="sub-menu">
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
  </li>
  <li>菜单2</li>
</ul>

$(document).ready(function() {
  $('.main-menu li').hover(
    function() {
      $(this).find('.sub-menu').stop(true, true).slideDown(200);
    },
    function() {
      $(this).find('.sub-menu').stop(true, true).slideUp(200);
    }
  );
});

• 说明：hover 包含鼠标进入和离开两个回调函数，stop(true, true) 用于防止动画队列堆积。

基于 click 事件的二级菜单（适合移动端）

$(document).ready(function() {
  $('.main-menu > li').click(function(e) {
    e.stopPropagation();
    $(this).find('.sub-menu').slideToggle(200);
    $(this).siblings().find('.sub-menu').slideUp(200);
  });
});

• 说明：e.stopPropagation() 阻止事件冒泡，slideToggle 切换显示/隐藏状态，同时关闭其他已展开的子菜单。

CSS 配合增强体验

.sub-menu {
  display: none; /* 默认隐藏 */
  position: absolute;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.main-menu > li {
  position: relative; /* 为子菜单定位提供参照 */
}

注意事项

1. 性能优化：事件委托（如 $('.main-menu').on('click', 'li', fn)）适合动态生成的菜单。
2. 兼容性：移动端建议使用 click 而非 hover。
3. 无障碍：为菜单添加 aria-expanded 属性以支持屏幕阅读器。

如需更复杂的交互（如延迟关闭），可结合 setTimeout 实现。实际效果可通过调整动画参数（如 slideDown(400)）或使用 CSS 过渡替代。