我创建了一个带有切换按钮的响应式移动导航栏。人们可以通过单击来打开和关闭切换按钮。但是,当单击移动导航栏中的链接时,页面会向下滚动到相应的部分,但移动导航栏保持打开状态。
我尝试创建一个 cons 链接并使用 getElementById abd 选择所有链接以删除活动状态,但在单击链接后但代码不起作用。
这是我的 HTML 代码:
<div class="dropdown-menu">
<ul>
<li><a href="#home" id="links">Home</a></li>
<li><a href="#about" id="links">About</a></li>
<li><a href="#projects" id="links">Projects</a></li>
<li><a href="#contact" id="links">Contact</a></li>
</ul>
</div>
这是 JS 代码:
const toggleBtn = document.querySelector('.toggle-btn')
const toggleBtnIcon = document.querySelector('.toggle-btn i')
const dropDownMenu = document.querySelector('.dropdown-menu')
toggleBtn.onclick = function () {
dropDownMenu.classList.toggle('open')
const isOpen = dropDownMenu.classList.contains('open')
toggleBtnIcon.classList = isOpen ? 'fa-solid fa-xmark' : 'fa-solid fa-bars'
}
将其添加到您的 Js 中,您的代码就可以工作了
const links = document.querySelectorAll('.links');
links.forEach(link => {
link.addEventListener('click', () => {
dropDownMenu.classList.remove('open');
toggleBtnIcon.classList = 'fa fa-bars';
});
});