重写驭鑫网站 当前已完成 首页、关于驭鑫页面

驭鑫/new yxsilicon/js/header.js

@@ -0,0 +1,63 @@
+document.addEventListener('DOMContentLoaded', function () {
+    /** 主营业务下拉菜单与遮罩层交互 */
+    const dropdown = document.querySelector('.nav-dropdown');
+    const mask = document.querySelector('.dropdown-mask');
+    const navLink = dropdown?.querySelector('.nav-link');
+
+    if (dropdown || mask || navLink) {
+        const handleToggleDropdown = (e) => {
+            e.preventDefault();
+            const isOpen = dropdown.classList.contains('open');
+            if (isOpen) {
+                dropdown.classList.remove('open');
+                dropdown.setAttribute('aria-expanded', 'false');
+                mask.classList.remove('active');
+            } else {
+                dropdown.classList.add('open');
+                dropdown.setAttribute('aria-expanded', 'true');
+                mask.classList.add('active');
+            }
+        };
+
+        const handleCloseDropdown = () => {
+            dropdown.classList.remove('open');
+            dropdown.setAttribute('aria-expanded', 'false');
+            mask.classList.remove('active');
+        };
+
+        // 点击“主营业务”切换下拉
+        navLink.addEventListener('click', handleToggleDropdown);
+
+        // 遮罩层点击关闭
+        mask.addEventListener('click', handleCloseDropdown);
+
+        // 键盘无障碍支持（Enter/Space）
+        dropdown.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleToggleDropdown(e);
+            }
+            if (e.key === 'Escape') {
+                handleCloseDropdown();
+            }
+        });
+
+    }
+
+
+
+    /** 下拉菜单箭头hover切换图片 */
+    // const dropdownMenuItems = document.querySelectorAll('.dropdown-menu li');
+    // if (dropdownMenuItems.length) {
+    //     dropdownMenuItems.forEach((li) => {
+    //         li.addEventListener('mouseenter', () => {
+    //             const img = li.querySelector('.dropdown-item img');
+    //             if (img) img.src = './imgs/home/arrow.svg';
+    //         });
+    //         li.addEventListener('mouseleave', () => {
+    //             const img = li.querySelector('.dropdown-item img');
+    //             if (img) img.src = './imgs/home/arrow2.svg';
+    //         });
+    //     });
+    // }
+});