首先,我绝对不是JavaScript的英雄。

我在当前正在构建的responsive topnav example from W3Schools上实现了website,但很想知道如何在单击菜单项之一后将其隐藏(因为大多数菜单项都链接到同一页面上的项,因此无需刷新那里)。

附言我已经看过许多其他问题,但是我只是认为这个特定问题可能具有非常简单的解决方案,在W3Schools中添加它也非常有用。

最佳答案

单击链接后,这将关闭您的导航。

var topNav = document.querySelector('#myTopnav');
topNav.addEventListener('click', function(e) {
  if (e.target.tagName === 'A') {
    topNav.classList.remove('responsive');
  }
});


仅一个菜单项占据整个列表高度的另一个问题是CSS问题。在小屏幕尺寸下查看导航时,需要删除height: 100%

.navbar a {
  height: 100%;
}


在我注释掉该行之后,情况看起来还不错。

javascript - 单击元素后切换W3Schools响应式topnav-LMLPHP

07-24 18:51