jquery 菜单
jQuery 菜单实现方法
使用 jQuery 可以轻松创建动态菜单，以下是几种常见实现方式：
基本下拉菜单
通过 jQuery 的 slideToggle() 方法实现简单的下拉效果：
$(document).ready(function(){
$('.menu-item').click(function(){
$(this).find('.submenu').slideToggle();
});
});对应 HTML 结构：
<ul class="menu">
<li class="menu-item">
主菜单
<ul class="submenu">
<li>子项1</li>
<li>子项2</li>
</ul>
</li>
</ul>鼠标悬停菜单
使用 hover() 方法实现鼠标悬停效果：
$('.menu-item').hover(
function(){ $(this).find('.submenu').stop().fadeIn(200); },
function(){ $(this).find('.submenu').stop().fadeOut(200); }
);多级嵌套菜单
通过递归选择器处理多级菜单：
$('.menu li').has('ul').each(function(){
$(this).addClass('has-submenu');
$(this).children('ul').hide();
}).click(function(e){
e.stopPropagation();
$(this).children('ul').toggle();
});响应式导航菜单
针对移动设备的响应式实现：
$('.menu-toggle').click(function(){
$('.main-menu').slideToggle();
});
$(window).resize(function(){
if($(window).width() > 768){
$('.main-menu').show();
} else {
$('.main-menu').hide();
}
});菜单样式优化
添加 CSS 过渡效果增强用户体验：
.submenu {
transition: all 0.3s ease;
overflow: hidden;
}
.menu-item {
position: relative;
}
.has-submenu:after {
content: '+';
position: absolute;
right: 10px;
}注意事项
- 确保在 DOM 完全加载后执行 jQuery 代码（使用
$(document).ready()） - 使用
stop()方法防止动画队列堆积 - 移动端考虑添加触摸事件支持
- 对键盘导航添加无障碍支持（如
tabindex和keydown事件）
