css - 在纯 CSS 中切换，带有一个子元素

Question

我正在尝试使用 :focus 伪选择器在纯 CSS 中进行切换。

我的问题是我尝试将焦点放在父元素上并同时更改子元素和相邻选择器。

<p class="collapser" tabindex="0">FILTERS
<span class="dblArrow right">
    <i class="icon icon-double-chevron-right" tabindex="0">>></i>
    <i class="icon icon-double-chevron-left" tabindex="0"><<</i>
</span>
</p>
<ul class="filters">.....

点击折叠器(或 <i> 中的箭头)，我想显示 <ul>或隐藏它，并更改箭头。

您可以查看我到目前为止取得的成果的演示:http://jsfiddle.net/TmzC7/9/ 它有缺点:当您单击折叠器外的任何地方时，过滤器将被隐藏。要隐藏过滤器，您必须单击箭头。

如果有解决方案使箭头或整个折叠器(更好)可以处理切换和切换箭头，那就太好了，但我认为您必须为此使用 JavaScript...

我试着做这样的事情:

.collapser:focus  .icon-double-chevron-right:focus + .icon-double-chevron-left {
   opacity:1;
   text-indent:0;
}

检测点击箭头，但没有用。我假设焦点不会冒泡。

有没有不用 JavaScript 就能实现的技巧(比如在 tabindex 上玩什么的)？

Answer 1

使用此处的示例 http://ghinda.net/css-toggle-switches/

我能够做到这一点 http://jsfiddle.net/DbXQs/

似乎问题在于使用 :checked 选择器。

希望对您有所帮助。