首先,我绝对不是 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 响应式顶部导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55153590/