js实现分级菜单
实现分级菜单的方法
使用JavaScript实现分级菜单通常涉及DOM操作和事件监听。以下是几种常见的实现方式：
使用纯JavaScript实现
// 获取菜单元素
const menuItems = document.querySelectorAll('.menu-item');
// 为每个菜单项添加事件监听
menuItems.forEach(item => {
item.addEventListener('mouseenter', function() {
const submenu = this.querySelector('.submenu');
if (submenu) {
submenu.style.display = 'block';
}
});
item.addEventListener('mouseleave', function() {
const submenu = this.querySelector('.submenu');
if (submenu) {
submenu.style.display = 'none';
}
});
});使用CSS配合JavaScript
// 只需处理点击事件
const menuItems = document.querySelectorAll('.menu-item.has-children');
menuItems.forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
this.classList.toggle('active');
});
});对应的CSS部分：
.submenu {
display: none;
}
.menu-item.active .submenu {
display: block;
}递归实现多级菜单
function initMenu(menuContainer) {
const items = menuContainer.querySelectorAll('li');
items.forEach(item => {
const submenu = item.querySelector('ul');
if (submenu) {
item.classList.add('has-children');
item.addEventListener('click', function(e) {
e.stopPropagation();
submenu.classList.toggle('open');
});
initMenu(submenu); // 递归初始化子菜单
}
});
}
// 初始化顶级菜单
initMenu(document.getElementById('main-menu'));使用事件委托优化性能
document.getElementById('menu-container').addEventListener('click', function(e) {
const target = e.target.closest('.menu-item');
if (target && target.classList.contains('has-children')) {
e.preventDefault();
const submenu = target.querySelector('.submenu');
submenu.classList.toggle('active');
}
});注意事项
- 确保HTML结构正确，通常使用嵌套的
<ul>和<li>元素构建菜单 - 考虑移动设备上的触摸事件处理
- 添加适当的ARIA属性以实现无障碍访问
- 对于大型菜单，考虑使用事件委托提高性能
- 注意处理事件冒泡，避免意外触发父元素事件
这些方法可以根据具体需求进行组合和调整，实现不同样式的分级菜单效果。
