重新设计为阿里云风格

js/nav-third-level.js

@@ -0,0 +1,50 @@
+// 三级导航菜单交互脚本
+(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();
+    }
+})();