純粋なCSSで子要素を使用して切り替えます

Question

純粋なCSSで：focus擬似セレクタを使用してトグルをしようとしています。

私の問題は、親要素に焦点を当てて、子要素と隣接セレクタの両方を変更しようとしています。 collapserに上をクリック（または<i>中の矢印）で

<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">..... 

、私は<ul>を表示したり、それを非表示にすると、矢印を変更。

私が今までに達成したことのデモを見ることができます：http://jsfiddle.net/TmzC7/9/ 欠点があります。コラプサの外側の場所をクリックすると、フィルタは非表示になります。フィルターを非表示にするには、矢印をクリックする必要があります。

解決策がある場合はそのように矢印または全部collapserに（良い）トグルを処理し、矢印を切り替えることができ、それは素晴らしいことだが、私はあなたがこのために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/

私はキャッチが:checkedセレクタを使用することであるようにそれはそう、このhttp://jsfiddle.net/DbXQs/

を行うことができました。

願っています。

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を参照してください）