当我单击 <a> 链接时，如何关闭导航栏？答案

【问题标题】：How do i get the navbar to close when i click on a <a> link?当我单击 <a> 链接时，如何关闭导航栏？
【发布时间】：2019-03-28 04:15:26
【问题描述】：

所以我使用的是纯 CSS 导航栏，它使用复选框覆盖导航菜单。 我正在尝试在选择链接时关闭导航栏。 例如，当我单击联系人链接时，它应该向下滚动到同一页面上的 id"contact"，但是，当导航栏仍在显示时，页面会向下滚动，因此我必须手动单击复选框以将其关闭. 我尝试使用一些 js 来解决这个问题，但没有运气:(

完整代码链接：

https://codepen.io/majorsyan/pen/Oqejox

<!-- Navigation code-->
<input type="checkbox" id="nav-toggle" class="checkbox" />
<label for="nav-toggle" class="nav-toggle-btn">
<span class="nav-icon-bar"></span>
</label>
<div class="overlay"></div>
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="index.html" class="nav-links">Home</a>
</li>
<li class="nav-item">
<a href="portfolio.html" class="nav-links">Portfolio</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-links">About</a>
</li>
<li class="nav-item">
<a href="index.html#contact" class="nav-links">Contact</a>
</li>
</ul>
</nav>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

在您的复选框上设置checked 属性应该可以解决问题！

const links = document.querySelectorAll('.nav-item a')
const checkbox = document.querySelector('#nav-toggle')

for ( const link of links ) {
  link.onclick = handleClick
}

function handleClick() {
  checkbox.checked = false
}

或者，如果您使用的是 jQuery：

$('.nav-item a').click(hideOverlay)

function hideOverlay() {
  $('#nav-toggle').prop('checked', false)
}

希望这会有所帮助！ :)

【讨论】：

第一个解决方案对我来说效果很好。非常感谢您的帮助。