单击项目后切换W3Schools响应式topnav

Question

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

我在目前正在构建的responsive topnav example from W3Schools上实现了website，但很想知道如何在单击菜单项之一后将其隐藏（因为大多数菜单项都将链接到菜单项同一页面，因此没有刷新。）

P.S。我研究了很多其他问题，但是我只是认为这个特定问题可能具有非常简单的解决方案，在W3Schools中添加它也非常有用。

Answer 1

这将在单击链接后关闭导航。

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%;
}

在我注释掉该行之后，一切看起来很好。