您好,我正在再次尝试寻找答案-有人第一次建议我如何获得想要的悬停功能,但是当您单击菜单链接时我想要它。

我是Web开发的相对入门者,目前正在重新设计我的DJ网站。

http://www.jameswinfield.co.uk/v2.html

在左上方的菜单中,我想要一个单击“事件”选项卡时下拉的div(以显示我正在DJing的下一个事件)。

如果可能,我宁愿不使用JavaScript / jQuery。

我尝试了各种想法,但都没有用。

请你帮忙。

谢谢詹姆斯

最佳答案

如果您希望元素是可切换的,则无法使用纯CSS来实现。

您可以在CSS链接中使用:active来更改样式(例如:显示下一个div),但是一旦停止单击元素后样式更改仍应保留,则此方法将无效。

要使此功能正常工作,可以使用一些小技巧,即在CSS中使用:target选择器。您的HTML看起来像这样:

<a href="#your_element">Click to toggle</a>

<div id="your_element">This will show up when you click on the link.</div>


并在CSS中..

#your_element{display: none;}
#your_element:target{display: block;}


示例:http://jsbin.com/pifiwezaji/1/

这样做的主要问题是您的元素将一直显示到刷新页面为止,我认为没有不使用Javascript的方法就无法再次隐藏它。 :target选择器的浏览器支持非常好,除IE8及更低版本外,所有浏览器均支持。

话虽如此,我会为此建议使用Javascript / jQuery。它只需要几行,并且管理起来会容易得多。

关于css - 单击下拉菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29903181/

10-12 12:40
查看更多