84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
// 移动端导航菜单控制
|
||
function toggleMobileMenu() {
|
||
const toggle = document.querySelector('.mobile-menu-toggle');
|
||
const overlay = document.querySelector('.mobile-nav-overlay');
|
||
const nav = document.querySelector('.mobile-nav');
|
||
|
||
if (!toggle || !overlay || !nav) return;
|
||
|
||
toggle.classList.toggle('active');
|
||
overlay.classList.toggle('active');
|
||
nav.classList.toggle('active');
|
||
document.body.style.overflow = nav.classList.contains('active') ? 'hidden' : '';
|
||
}
|
||
|
||
function closeMobileMenu() {
|
||
const toggle = document.querySelector('.mobile-menu-toggle');
|
||
const overlay = document.querySelector('.mobile-nav-overlay');
|
||
const nav = document.querySelector('.mobile-nav');
|
||
|
||
if (!toggle || !overlay || !nav) return;
|
||
|
||
toggle.classList.remove('active');
|
||
overlay.classList.remove('active');
|
||
nav.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 点击导航链接后关闭菜单
|
||
const mobileNavLinks = document.querySelectorAll('.mobile-nav .nav-link');
|
||
mobileNavLinks.forEach(link => {
|
||
link.addEventListener('click', closeMobileMenu);
|
||
});
|
||
|
||
// 点击遮罩层关闭菜单
|
||
const overlay = document.querySelector('.mobile-nav-overlay');
|
||
if (overlay) {
|
||
overlay.addEventListener('click', closeMobileMenu);
|
||
}
|
||
|
||
// ESC键关闭菜单
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
closeMobileMenu();
|
||
}
|
||
});
|
||
|
||
// 防止双击缩放（iOS Safari）
|
||
let lastTouchEnd = 0;
|
||
document.addEventListener('touchend', function(event) {
|
||
const now = Date.now();
|
||
if (now - lastTouchEnd <= 300) {
|
||
event.preventDefault();
|
||
}
|
||
lastTouchEnd = now;
|
||
}, false);
|
||
|
||
// 优化触摸反馈
|
||
document.addEventListener('touchstart', function(e) {
|
||
const target = e.target;
|
||
if (target.classList.contains('btn') ||
|
||
target.classList.contains('time-slot') ||
|
||
target.classList.contains('calendar-day') ||
|
||
target.classList.contains('nav-link')) {
|
||
target.style.transition = 'transform 0.1s';
|
||
target.style.transform = 'scale(0.97)';
|
||
}
|
||
}, { passive: true });
|
||
|
||
document.addEventListener('touchend', function(e) {
|
||
const target = e.target;
|
||
if (target.classList.contains('btn') ||
|
||
target.classList.contains('time-slot') ||
|
||
target.classList.contains('calendar-day') ||
|
||
target.classList.contains('nav-link')) {
|
||
setTimeout(() => {
|
||
target.style.transform = '';
|
||
}, 100);
|
||
}
|
||
}, { passive: true });
|
||
});
|
||
|