Переключить в чистом CSS с дочерним элементом - PullRequest
Новая
       30

Переключить в чистом CSS с дочерним элементом

2 голосов
/ 16 марта 2012

Я пытаюсь выполнить переключение в чистом CSS с помощью псевдо-селектора focus.

Моя проблема в том, что я пытаюсь сделать фокус на родительском элементе и изменить как дочерние элементы, так и смежный селектор. 

<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;
}

, чтобы обнаружить щелчок по стрелкам, но это не сработало.Я предполагаю, что фокус не всплывает.

Есть ли хитрость (например, игра на tabindex или что-то еще), чтобы достичь этого без JavaScript?

Ответы [ 2 ]

2 голосов
/ 16 марта 2013

используя примеры здесь http://ghinda.net/css-toggle-switches/

я смог сделать это http://jsfiddle.net/DbXQs/

похоже, что выгода заключается в использовании селектора :checked.

надеюсь, это поможет.

0 голосов
/ 25 марта 2016

Вы можете использовать селектор :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>

(см. Также эту скрипку )

...