jquery菜单

以下是关于使用jQuery创建交互式菜单的几种常见方法及实现示例：

基础下拉菜单实现

通过jQuery的slideToggle和toggleClass实现简单下拉效果：

$('.menu-item').hover(function() {
  $(this).find('.submenu').stop().slideToggle(200);
  $(this).toggleClass('active');
});

对应HTML结构：

<ul class="menu">
  <li class="menu-item">
    <a href="#">主菜单</a>
    <ul class="submenu">
      <li><a href="#">子项1</a></li>
      <li><a href="#">子项2</a></li>
    </ul>
  </li>
</ul>

多级嵌套菜单

使用事件委托处理动态加载的多级菜单：

$(document).on('click', '.has-children', function(e) {
  e.stopPropagation();
  $(this).children('ul').toggleClass('open');
});

CSS需配合设置：

.submenu { display: none; }
.submenu.open { display: block; }

响应式移动菜单

创建适配移动设备的汉堡菜单：

$('.mobile-menu-btn').click(function() {
  $('.main-nav').toggleClass('visible');
  $(this).toggleClass('active');
});

建议搭配媒体查询：

@media (max-width: 768px) {
  .main-nav { display: none; }
  .main-nav.visible { display: block; }
}

动画增强效果

添加缓动动画提升用户体验：

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

键盘导航支持

为无障碍访问添加键盘操作：

$('.menu a').keydown(function(e) {
  if (e.keyCode === 13) { // Enter键
    $(this).next('.submenu').toggle();
  }
});

注意事项：

• 使用stop()方法防止动画队列堆积
• 移动端应添加touchstart事件支持
• 考虑使用aria-expanded属性增强可访问性
• 复杂场景可结合jQuery UI的menu()组件

以上方法可根据具体需求组合使用，建议通过CSS预处理动画效果以提升性能。