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 的灵活选择器和动画方法使得创建各种菜单交互变得简单高效。
