切換純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）