单击项目后切换W3Schools响应式topnav [英] Toggle W3Schools responsive topnav after click on item

问题描述

开始时，我绝对不是JavaScript的英雄.

To start I'm absolutely no hero with javascript.

我在

I implemented a responsive topnav example from W3Schools on a website I'm building right now, but would love to know how to hide it after clicking on one of the menu items (as most will link to items on the same page, so no refresh there).

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

P.S. I've looked through a lot of other questions, but I just think this particular question probably has a very simple solution which would also be really usefull to be added on W3Schools.

推荐答案

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

This will close your nav after clicking a link.

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

另一个问题，其中只有一个菜单项占据了整个列表高度，这是一个CSS问题.在小尺寸屏幕上查看导航时，需要删除height: 100%.

The other issue where only one menu item fills the entire list height is a CSS problem. You need to remove height: 100% when viewing the navigation in small screen dimenstions.

.navbar a {
  height: 100%;
}

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

After I commented that line out, things look fine.

这篇关于单击项目后切换W3Schools响应式topnav的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！