Question

我正在尝试使用：focus伪选择器在纯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">.....

点击collapser（或<i>中的箭头），我想显示<ul>或隐藏它，然后更改箭头。

您可以查看我迄今为止取得的成就的演示：http://jsfiddle.net/TmzC7/9/ 它有一些缺点：当你点击collapser外的任何地方时，过滤器都会被隐藏。要隐藏过滤器，您必须单击箭头。

如果有一个解决方案，以便箭头或整个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/

我能够做到http://jsfiddle.net/DbXQs/

看起来好像是使用:checked选择器。

希望它有所帮助。

Answer 2

您可以使用:target选择器，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

（另见this Fiddle）

使用子元素切换纯CSS

2 个答案: