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

Question

我想使用纯 HTML 和 CSS 创建一个响应式菜单，但我偶然发现的一个问题是我的网站使用 anchor 链接进行导航，而不是外部页面链接。因为它们是 anchor 链接，所以当选择其中一个时，菜单覆盖仍然存在。

当选择导航链接时，如何使用 Javascript 将 display: none 样式添加到菜单？如果用户重新打开导航，这将需要能够再次被覆盖。

这是我的导航的基本 HTML:

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