使用Javascript选择链接时，如何隐藏HTML元素？

Question

I wanted to create a responsive menu using purely HTML and CSS but an issue I've stumbled upon is that my website uses anchor links for the navigation, not external page links. Because they are anchor links, when one is selected the menu overlay is still there.

How can I use Javascript to add the display: none style to the menu when a navigation link is selected? This will need to be able to be overridden again if the user reopens the navigation.

Here's the basic HTML for my navigation:

<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">

<nav>
    <ul>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

CSS:

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ nav {
    display: block;
}

Answer 1

一种轻松做到这一点的方法是使用jquery（如果您不使用jquery，我强烈建议您开始使用），只需将id =“ menuID”添加到菜单中：

<a href="url" onclick="$('#menuID').css('display', 'none');">Click me!</a>