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

Question

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

Answer 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)

}

希望这可以帮助！:)