单击<a>链接时，如何关闭导航条？
单击<a>链接时，如何关闭导航条？
提问于 2019-03-27 19:54:24
所以，我使用一个纯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>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-27 20:04:30
在复选框上设置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)
}希望这会有帮助！)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55385466
复制相关文章
相似问题
腾讯云开发者
