-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathmobile-menu.js
More file actions
46 lines (41 loc) · 1.67 KB
/
mobile-menu.js
File metadata and controls
46 lines (41 loc) · 1.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
* 移动端汉堡菜单脚本
* 用法：在页面底部引入此脚本
* <script src="./js/mobile-menu.js"></script>
*/
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.mobile-menu-toggle');
const navbarNav = document.querySelector('.navbar-nav');
if (menuToggle && navbarNav) {
// 切换菜单
menuToggle.addEventListener('click', function() {
this.classList.toggle('active');
navbarNav.classList.toggle('active');
this.setAttribute('aria-expanded',
this.classList.contains('active') ? 'true' : 'false');
});
// 点击导航链接后关闭菜单
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function() {
menuToggle.classList.remove('active');
navbarNav.classList.remove('active');
});
});
// ESC 键关闭菜单
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && menuToggle.classList.contains('active')) {
menuToggle.classList.remove('active');
navbarNav.classList.remove('active');
}
});
// 点击菜单外部区域关闭
document.addEventListener('click', function(e) {
if (menuToggle.classList.contains('active') &&
!navbarNav.contains(e.target) &&
!menuToggle.contains(e.target)) {
menuToggle.classList.remove('active');
navbarNav.classList.remove('active');
}
});
}
});