56 lines
2.2 KiB
JavaScript
56 lines
2.2 KiB
JavaScript
// 响应式导航（home / ai / competition_list / aboutus 共用）：
|
||
// 页面在 header 内放置 <button class="nav-toggle">，≤960px 时显示汉堡按钮，
|
||
// 点击切换 header.nav-open，CSS 控制折叠面板与 .nav-backdrop 遮罩。
|
||
(function () {
|
||
function initNavResponsive() {
|
||
var toggles = document.querySelectorAll('.nav-toggle');
|
||
if (!toggles.length) return;
|
||
|
||
function syncBody() {
|
||
document.body.classList.toggle('nav-open', !!document.querySelector('header.nav-open'));
|
||
}
|
||
|
||
function setOpen(header, btn, open) {
|
||
header.classList.toggle('nav-open', open);
|
||
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||
btn.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
|
||
syncBody();
|
||
}
|
||
|
||
toggles.forEach(function (btn) {
|
||
var header = btn.closest('header');
|
||
if (!header || header.dataset.navReady) return;
|
||
header.dataset.navReady = '1';
|
||
|
||
var backdrop = document.createElement('div');
|
||
backdrop.className = 'nav-backdrop';
|
||
header.appendChild(backdrop);
|
||
|
||
btn.addEventListener('click', function (e) {
|
||
e.stopPropagation();
|
||
setOpen(header, btn, !header.classList.contains('nav-open'));
|
||
});
|
||
backdrop.addEventListener('click', function () {
|
||
setOpen(header, btn, false);
|
||
});
|
||
header.addEventListener('click', function (e) {
|
||
if (e.target.closest('.nav__links a, .nav-list a, .navbar-collapse a, .navbar-logout')) {
|
||
setOpen(header, btn, false);
|
||
}
|
||
});
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') setOpen(header, btn, false);
|
||
});
|
||
window.addEventListener('resize', function () {
|
||
if (window.innerWidth > 960) setOpen(header, btn, false);
|
||
});
|
||
});
|
||
}
|
||
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initNavResponsive);
|
||
} else {
|
||
initNavResponsive();
|
||
}
|
||
})();
|