所以我使用了一个纯 CSS 导航栏,它使用一个复选框来覆盖导航菜单。 我试图在选择链接时关闭导航栏。 例如,当我单击联系人链接时,它应该向下滚动到同一页面上的 id“联系人”,但是,页面向下滚动时导航栏仍在显示,因此我必须手动单击复选框以将其关闭. 我曾尝试使用一些 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>
最佳答案
在复选框上设置 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)
}
希望对您有所帮助! :)
关于javascript - 单击 <a> 链接时如何关闭导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55385466/