87 lines
2.7 KiB
JavaScript
87 lines
2.7 KiB
JavaScript
/**
|
|
* 移动端导航管理脚本
|
|
*/
|
|
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();
|
|
}
|
|
});
|
|
});
|