51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
// 三级导航菜单交互脚本
|
|
(function () {
|
|
'use strict';
|
|
|
|
// 初始化三级导航
|
|
function initThirdLevelNav() {
|
|
const navContMenus = document.querySelectorAll('.nav-cont-menu.mega-menu');
|
|
|
|
navContMenus.forEach(menu => {
|
|
const categoryItems = menu.querySelectorAll('.nav-category-item');
|
|
const thirdPanels = menu.querySelectorAll('.nav-third-panel');
|
|
|
|
if (categoryItems.length === 0 || thirdPanels.length === 0) {
|
|
return; // 没有三级菜单
|
|
}
|
|
|
|
// 默认激活第一个
|
|
if (categoryItems[0]) {
|
|
categoryItems[0].classList.add('active');
|
|
}
|
|
if (thirdPanels[0]) {
|
|
thirdPanels[0].classList.add('active');
|
|
}
|
|
|
|
// 绑定hover事件
|
|
categoryItems.forEach((item, index) => {
|
|
item.addEventListener('mouseenter', function () {
|
|
// 移除所有active状态
|
|
categoryItems.forEach(cat => cat.classList.remove('active'));
|
|
thirdPanels.forEach(panel => panel.classList.remove('active'));
|
|
|
|
// 激活当前
|
|
this.classList.add('active');
|
|
const categoryIndex = this.getAttribute('data-category-index');
|
|
const targetPanel = menu.querySelector(`.nav-third-panel[data-panel-index="${categoryIndex}"]`);
|
|
if (targetPanel) {
|
|
targetPanel.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// DOM加载完成后初始化
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initThirdLevelNav);
|
|
} else {
|
|
initThirdLevelNav();
|
|
}
|
|
})();
|