单击<a>链接时如何关闭导航栏?

因此,我使用的是纯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>


互换的青春
浏览 182回答 1
1回答

森林海

checked在复选框上设置属性应该可以解决问题!const links = document.querySelectorAll('.nav-item a')const checkbox = document.querySelector('#nav-toggle')for ( const link of links ) {&nbsp; link.onclick = handleClick}function handleClick() {&nbsp; checkbox.checked = false}或者,如果您使用的是jQuery:$('.nav-item a').click(hideOverlay)function hideOverlay() {&nbsp; $('#nav-toggle').prop('checked', false)}希望这可以帮助!:)
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript