jquery 菜单

jQuery 菜单实现方法

使用 jQuery 可以轻松创建动态菜单，以下是一些常见实现方式：

基础下拉菜单

通过 jQuery 的 slideToggle() 或 fadeToggle() 实现简单的下拉效果：

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

对应 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>

响应式移动菜单

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

$('.menu-toggle').click(function(){
  $('.main-nav').toggleClass('active');
  $(this).toggleClass('open');
});

CSS 配合：

.main-nav {
  display: none;
}
.main-nav.active {
  display: block;
}

多级嵌套菜单

处理多级嵌套菜单的展开/收起：

$('.menu li').has('ul').prepend('<span class="arrow">▶</span>');
$('.menu li .arrow').click(function(e){
  e.stopPropagation();
  $(this).siblings('ul').toggle();
  $(this).text($(this).text() === '▶' ? '▼' : '▶');
});

菜单高亮当前页

根据 URL 自动高亮当前页面菜单项：

var current = location.pathname;
$('.menu a').each(function(){
  if($(this).attr('href') === current){
    $(this).addClass('active');
  }
});

注意事项

• 确保在 DOM 加载完成后执行 jQuery 代码
• 使用 stop() 方法防止动画队列堆积
• 移动端考虑添加触摸事件支持
• 对键盘导航添加支持以提升可访问性

这些方法可以根据具体需求组合使用或进一步扩展，jQuery 的灵活选择器和动画方法使得创建各种菜单交互变得简单高效。