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

我想创建一个使用纯粹的HTML和CSS的响应式菜单，但我偶然发现的问题是我的网站使用锚链接进行导航，而不是外部页面链接。因为它们是锚链接，所以选择一个时，菜单叠加层仍然存在。如何在使用Javascript选择链接时隐藏HTML元素？

如何在选择导航链接时使用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; 
}

来源

2017-02-20 cbg

您可以在您的问题中显示相关的HTML吗？根据您现有源代码的结构，您可能会发现一些解决方案比其他解决方案更好，但没有先看到它，这会让您更难以为您提供最佳解决方案。也有可能为你赋予一个'class'名称的锚标签，假设它们还没有一个“或者你的锚子元素是否带有'id'？ – NewToJS

@NewToJS我添加了参考代码。关于将类分配给我的锚标记的问题，是的，如果需要，我可以做到这一点。 – cbg

所以它看起来像你的导航显示是基于隐藏的复选框被选中或未选中权？如果是这样，那么你所需要做的就是将事件监听器分配给你的锚标记，以取消选中该复选框“如果显示器是由它驱动的”我不认为你有任何JavaScript应该与这个菜单？有些东西缺失，因为菜单总是显示，所以我不能真正给你一个工作的例子。也许如果你可以创建一个jsfiddle？ https://jsfiddle.net/ – NewToJS

-1

一个容易做的方法是使用jQuery（如果你不使用jQuery我强烈建议你开始），只需在您的菜单中添加id =“menuID”：

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

来源

2017-02-20 00:41:25

jQuery没有在这个问题上标记，所以我建议你解释如何链接到图书馆。 – NewToJS

谢谢，但我使用jQuery的问题是，我不想为我想要实现的这个小事情加载库。这就是如果它可以用Javascript来完成？ – cbg

document.getElementById（“menuID”）。style.display =“none”;应该管用。 –

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

回答

相关问题