点击导航栏中的链接后，移动导航栏不会自动关闭

Question

我创建了一个带有切换按钮的响应式移动导航栏。人们可以通过单击来打开和关闭切换按钮。但是，当单击移动导航栏中的链接时，页面会向下滚动到相应的部分，但移动导航栏保持打开状态。

我尝试创建一个 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'
}

Answer 1

将其添加到您的 Js 中，您的代码就可以工作了

const links = document.querySelectorAll('.links');
links.forEach(link => {
  link.addEventListener('click', () => {
    dropDownMenu.classList.remove('open');
    toggleBtnIcon.classList = 'fa fa-bars'; 
  });
});