하위 요소가있는 순수 CSS로 전환

Question

다음을 사용하여 순수한 CSS에서 전환을 시도합니다. focus pseudo-selector.

내 문제는 부모 요소에 중점을두고 하위 요소와 인접 선택기를 모두 변경하려고합니다. 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 외부의 아무 곳이나 클릭 할 때. 필터를 숨기려면 화살표를 클릭해야합니다.

해결책이 있다면되도록 화살표 또는 전체 collapser (더 나은) 토글을 처리하고 화살표를 전환 할 수 있습니다, 그것은 좋은 것입니다,하지만 난 당신이 자바 스크립트를 사용할 필요가 이해 할수 ... 중 하나

내가 좋아하는 일을하려고 :

.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 참조)