在纯 CSS 中切换，带有子元素答案

【问题标题】：Toggle in pure CSS, with a child element在纯 CSS 中切换，带有子元素
【发布时间】：2012-04-02 01:47:27
【问题描述】：

我正在尝试使用 :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">.....

点击折叠器（或<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 的情况下实现这一点？

【问题讨论】：

标签： css focus css-selectors toggle

【解决方案1】：

使用此处的示例http://ghinda.net/css-toggle-switches/

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

似乎问题在于使用:checked 选择器。

希望对你有帮助。

【讨论】：

【解决方案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）

【讨论】：