我有一个带有 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; }
谁能帮帮我?
最佳答案
我认为简单而干净的解决方案是更改您的标记并将 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 控制结果来实现你想要的)
关于css - 使 div 出现在事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26209846/