jquery二级菜单

jQuery 实现二级菜单的方法

方法一：使用 hover 事件实现显示/隐藏

通过 jQuery 的 hover 方法监听鼠标悬停和离开事件，控制二级菜单的显示与隐藏。CSS 部分需设置二级菜单初始为隐藏状态。

<style>
  .submenu { display: none; }
  .menu-item:hover .submenu { display: block; } /* 备用纯CSS方案 */
</style>

<script>
  $(document).ready(function() {
    $('.menu-item').hover(
      function() { $(this).find('.submenu').stop().slideDown(200); },
      function() { $(this).find('.submenu').stop().slideUp(200); }
    );
  });
</script>

方法二：添加动画效果增强体验

结合 fadeIn/fadeOut 或 slideDown/slideUp 方法实现平滑过渡效果。stop() 方法用于防止动画队列堆积。

$('.menu-item').hover(
  function() { $(this).find('.submenu').stop(true, true).fadeIn(300); },
  function() { $(this).find('.submenu').stop(true, true).fadeOut(300); }
);

方法三：事件委托优化性能

对于动态生成的菜单项，使用事件委托减少绑定次数，通过 on() 方法将事件绑定到父元素。

$('#menu-container').on('mouseenter', '.menu-item', function() {
  $(this).find('.submenu').show();
}).on('mouseleave', '.menu-item', function() {
  $(this).find('.submenu').hide();
});

方法四：响应式适配处理

添加窗口大小监听，在小屏幕设备上改为点击触发。通过检测窗口宽度切换事件类型。

function handleMenu() {
  if ($(window).width() < 768) {
    $('.menu-item').off('hover').on('click', function() {
      $(this).find('.submenu').toggle();
    });
  } else {
    $('.menu-item').off('click').hover(/* 原有hover逻辑 */);
  }
}
$(window).resize(handleMenu);

注意事项

• 确保 HTML 结构正确，二级菜单需作为一级菜单项的子元素：

  <ul class="menu">
    <li class="menu-item">
      一级菜单
      <ul class="submenu">
        <li>二级项1</li>
        <li>二级项2</li>
      </ul>
    </li>
  </ul>

• 使用 stop(true, true) 清除动画队列时，第二个参数表示是否立即完成当前动画。

• 对于移动端，建议添加触摸事件支持，例如 touchstart 替代 click。

• 考虑无障碍访问时，可为菜单项添加 aria-haspopup 和 aria-expanded 属性。