63 lines
2.3 KiB
JavaScript
63 lines
2.3 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', function () {
|
|||
|
|
/** 主营业务下拉菜单与遮罩层交互 */
|
|||
|
|
const dropdown = document.querySelector('.nav-dropdown');
|
|||
|
|
const mask = document.querySelector('.dropdown-mask');
|
|||
|
|
const navLink = dropdown?.querySelector('.nav-link');
|
|||
|
|
|
|||
|
|
if (dropdown || mask || navLink) {
|
|||
|
|
const handleToggleDropdown = (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const isOpen = dropdown.classList.contains('open');
|
|||
|
|
if (isOpen) {
|
|||
|
|
dropdown.classList.remove('open');
|
|||
|
|
dropdown.setAttribute('aria-expanded', 'false');
|
|||
|
|
mask.classList.remove('active');
|
|||
|
|
} else {
|
|||
|
|
dropdown.classList.add('open');
|
|||
|
|
dropdown.setAttribute('aria-expanded', 'true');
|
|||
|
|
mask.classList.add('active');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCloseDropdown = () => {
|
|||
|
|
dropdown.classList.remove('open');
|
|||
|
|
dropdown.setAttribute('aria-expanded', 'false');
|
|||
|
|
mask.classList.remove('active');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 点击“主营业务”切换下拉
|
|||
|
|
navLink.addEventListener('click', handleToggleDropdown);
|
|||
|
|
|
|||
|
|
// 遮罩层点击关闭
|
|||
|
|
mask.addEventListener('click', handleCloseDropdown);
|
|||
|
|
|
|||
|
|
// 键盘无障碍支持（Enter/Space）
|
|||
|
|
dropdown.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|||
|
|
e.preventDefault();
|
|||
|
|
handleToggleDropdown(e);
|
|||
|
|
}
|
|||
|
|
if (e.key === 'Escape') {
|
|||
|
|
handleCloseDropdown();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/** 下拉菜单箭头hover切换图片 */
|
|||
|
|
// const dropdownMenuItems = document.querySelectorAll('.dropdown-menu li');
|
|||
|
|
// if (dropdownMenuItems.length) {
|
|||
|
|
// dropdownMenuItems.forEach((li) => {
|
|||
|
|
// li.addEventListener('mouseenter', () => {
|
|||
|
|
// const img = li.querySelector('.dropdown-item img');
|
|||
|
|
// if (img) img.src = './imgs/home/arrow.svg';
|
|||
|
|
// });
|
|||
|
|
// li.addEventListener('mouseleave', () => {
|
|||
|
|
// const img = li.querySelector('.dropdown-item img');
|
|||
|
|
// if (img) img.src = './imgs/home/arrow2.svg';
|
|||
|
|
// });
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
});
|