css - 使 div 出现在事件状态

Question

我有一个带有 UL 的 div，它控制我的投资组合元素的过滤，使用 .active 类我更改了过滤器的事件颜色。但我还有一个位于过滤器下方的 DIV，我希望它在单击每个过滤器时出现和消失。我只是在使用 CSS 选择器时遇到了问题!

我的 HTML:

<!--=== Portfolio Filter ===-->
<div class="row">
    <ul class="nav nav-pills col-xs-12">
        <li class="filter" data-filter="all">Show Me TV</li>
        <li class="filter" data-filter="print">Conventions</li>
        <li class="filter" data-filter="web">Elite</li>
    </ul>
</div>

<!--=== Description ===-->
<div class="container">
    <div class="row">
        <span class="category-description">
            all description
        </span>
        <span class="category-description">
            conventions description
        </span>
        <span class="category-description">
            elite description
        </span>
    </div>
</div>

CSS

.category-description { visibility:hidden; }
#portfolio .nav > li.active { color:#e21f24; }
#portfolio .nav > li.active + .category-description { visibility:visible; }

谁能帮帮我？

Answer 1

我认为简单而干净的解决方案是更改您的标记并将 description 元素移动到您的 li 元素中:

<li class="filter" data-filter="print">
    Conventions
    <div class="description">Conventions Description</div>
</li>

现在您可以控制 description 元素:

.description { display: none; }
li.active .description { display: block; }

(你需要通过 CSS 控制结果来实现你想要的)

JSFiddle Demo .