切换纯CSS，与子元素

Question

我想在纯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/ 它有一些缺点：当您单击collapser之外的任何位置时，过滤器将被隐藏。要隐藏过滤器，您必须点击箭头。

如果有一个解决方案，以使这些箭头或整个崩塌（更好的）可以处理的切换和开关箭头，这将是伟大的，但我认为你必须使用JavaScript来这...

我试图做这样的事情：

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

检测点击箭头，但没有奏效。我认为重点不会冒泡。

有没有一个技巧（比如在tabindex上玩什么）来实现这个没有JavaScript？

Answer 1

使用这里的例子http://ghinda.net/css-toggle-switches/

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

好像美中不足的是使用:checked选择。

希望它有帮助。

Answer 2

你可以使用:target选择，就像这样：

.icon-double-chevron-right, 
 
.icon-double-chevron-left, 
 
.filters { 
 
    padding: 10px; 
 
    margin: 0; 
 
    list-style: none; 
 
    display:block; 
 
    border: 1px solid #000; 
 
} 
 

 
.filters, 
 
.icon-double-chevron-left, 
 
.icon-double-chevron-right:target { 
 
    display: none; 
 
} 
 

 
.icon-double-chevron-right:target + .icon-double-chevron-left, 
 
.icon-double-chevron-right:target ~ .filters { 
 
    display:block; 
 
} 
 

 
a { 
 
    color: #333; 
 
    text-decoration: none; 
 
}

<div> 
 
    <a href="#hide" class="icon icon-double-chevron-right" id="hide">&gt;&gt;</a> 
 
    <a href="#show" class="icon icon-double-chevron-left" id="show">&lt;&lt;</a> 
 
    <ul id="drop" class="filters"> 
 
     <li> 
 
      <a href="#">FILTER 1</a>   
 
     </li> 
 
     <li> 
 
      <a href="#">FILTER 2</a>    
 
     </li> 
 
    </ul> 
 
</div>

（见this Fiddle）