使用 CSS 点击时显示/隐藏 div
2011-05-16
326513
我有一个菜单和三个隐藏的 div，它们会根据用户选择的选项显示。我想仅使用 CSS 在单击时显示/隐藏它们。我现在可以使用 jquery 来实现，但我希望在禁用 js 的情况下也可以访问它。有人在这里为其他人提供了 此代码 ，但它仅适用于 div:hover 或 div:active，当我将其更改为 div:visited 时，它不起作用。我需要添加一些内容吗？或者这不是正确的做法？非常感谢任何帮助 :)
问题是我的客户希望这些特定的 div 在选择菜单时滑动/淡入淡出，但我仍然希望它们在关闭 javascript 的情况下正确显示。也许 z-index 可以解决问题……？
3个回答
对于仅使用 CSS 的解决方案，请尝试使用复选框 hack。基本上，这个想法是使用复选框，并根据复选框是否被选中使用
:checked
伪选择器分配不同的样式。如果需要，可以通过将复选框附加到
label
来隐藏复选框。
dabblet 链接（不是我的）： http://dabblet.com/gist/1506530
CSS Tricks 文章链接： http://css-tricks.com/the-checkbox-hack/
Josh
2012-12-20
这可以通过将“tabindex”附加到元素来实现。这将使该元素“可点击”。然后，您可以使用 :focus 选择隐藏的 div，如下所示...
.clicker {
width:100px;
height:100px;
background-color:blue;
outline:none;
cursor:pointer;
}
.hiddendiv{
display:none;
height:200px;
background-color:green;
}
.clicker:focus + .hiddendiv{
display:block;
}<html>
<head>
</head>
<body>
<div>
<div class="clicker" tabindex="1">Click me</div>
<div class="hiddendiv"></div>
</div>
</body>
</html>+ 选择器将选择“clicker”div 之后最近的元素。您可以使用其他选择器，但我认为目前没有办法选择非同级或非子级的元素。
James Fidlin
2016-01-27