jquery导航
jQuery 导航实现方法
基础导航菜单实现
使用 jQuery 可以快速实现交互式导航菜单。通过选择器获取 DOM 元素并绑定事件，例如点击展开子菜单：
$(document).ready(function() {
$('.nav-item').click(function() {
$(this).find('.submenu').slideToggle();
});
});平滑滚动到锚点
实现点击导航链接平滑滚动到页面指定位置：
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
$('html, body').animate(
{ scrollTop: $($(this).attr('href')).offset().top },
500
);
});响应式导航栏
结合 CSS 媒体查询和 jQuery 实现移动端菜单切换：
$('.menu-toggle').click(function() {
$('.nav-links').toggleClass('active');
});高亮当前页面菜单项
根据当前 URL 自动高亮导航中的对应项：
var current = location.pathname;
$('.nav-link').each(function() {
if ($(this).attr('href') === current) {
$(this).addClass('active');
}
});下拉菜单实现
创建带延迟效果的下拉菜单，避免鼠标移出时立即关闭：
$('.has-dropdown').hover(
function() {
$(this).find('.dropdown').stop().fadeIn(200);
},
function() {
$(this).find('.dropdown').stop().fadeOut(200);
}
);注意事项
- 确保在
$(document).ready()中执行代码以保证 DOM 加载完成 - 对于移动端触摸事件，建议使用
click而非hover - 考虑添加 ARIA 属性增强可访问性
- 性能优化：对频繁操作的事件使用事件委托
扩展功能
- 结合 History API 实现无刷新页面切换
- 添加动画过渡效果增强用户体验
- 实现面包屑导航与主导航联动
- 使用 localStorage 保存用户导航状态
