/** * 移动端导航管理脚本 */ document.addEventListener('DOMContentLoaded', function() { // 导航元素 const mobileMenuToggle = document.getElementById('mobile-menu-toggle'); const closeMobileMenu = document.getElementById('close-mobile-menu'); const mobileMenu = document.getElementById('mobile-menu'); // 如果移动菜单元素不存在,不执行后续代码 if (!mobileMenu) return; // 获取遮罩层 const overlay = mobileMenu.querySelector('.opacity-50'); // 打开菜单函数 function openMobileMenu() { mobileMenu.classList.remove('translate-x-full'); mobileMenu.classList.add('translate-x-0'); document.body.classList.add('overflow-hidden'); // 淡入遮罩 if (overlay) { overlay.classList.remove('opacity-0'); overlay.classList.add('opacity-50'); } } // 关闭菜单函数 function closeMobileMenu() { mobileMenu.classList.remove('translate-x-0'); mobileMenu.classList.add('translate-x-full'); document.body.classList.remove('overflow-hidden'); // 淡出遮罩 if (overlay) { overlay.classList.remove('opacity-50'); overlay.classList.add('opacity-0'); } } // 绑定打开菜单事件 if (mobileMenuToggle) { mobileMenuToggle.addEventListener('click', openMobileMenu); } // 绑定关闭菜单事件 if (closeMobileMenu) { closeMobileMenu.addEventListener('click', closeMobileMenu); } // 点击遮罩关闭菜单 if (overlay) { overlay.addEventListener('click', closeMobileMenu); } // 菜单项激活状态 const currentPath = window.location.pathname; const menuItems = mobileMenu.querySelectorAll('a[href]'); menuItems.forEach(item => { const itemPath = item.getAttribute('href'); // 路径完全匹配或者是子路径 if (currentPath === itemPath || (itemPath !== '/' && currentPath.startsWith(itemPath))) { item.classList.add('bg-indigo-50', 'text-indigo-700', 'font-medium'); item.classList.remove('hover:bg-gray-100'); // 如果有图标,也更新图标颜色 const icon = item.querySelector('i'); if (icon) { icon.classList.remove('text-gray-400'); icon.classList.add('text-indigo-600'); } } }); // 监听ESC键关闭菜单 document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && mobileMenu && !mobileMenu.classList.contains('translate-x-full')) { closeMobileMenu(); } }); });