让div出现在活动状态

我有一个带UL的div，它使用.active类控制我的投资组合项目的过滤，我改变了过滤器的活动颜色。但我也有一个DIV低于过滤器，我希望它在每个过滤器被点击时出现和消失。我只是遇到了CSS选择器的问题！让div出现在活动状态

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

谁能帮了一点？

来源

2014-10-06 ve1jdramas

如果你想控制纯CSS，你需要为你的'row'元素添加'active'类，例如'active-web'，然后''''选择器工作：'.row.active- web + .container .category-description'。否则，你需要JavaScript ... – dashtinejad 2014-10-06 04:02:31

每个过滤器有它自己的描述吗？你有三个过滤器，但只有一个描述。当说明会显示？通过哪个过滤器？ – dashtinejad 2014-10-06 04:04:28

是每个过滤器都有自己的描述，每个过滤器都应该显示在其过滤器下方，并且切换前一个过滤器应该隐藏，并且新过滤器需要显示在新过滤器下方。希望一切都有道理我更新了HTML，我认为它应该去 – ve1jdramas 2014-10-06 04:09:32

我认为简单干净的解决方案，正在改变你的标记和移动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。

来源

2014-10-06 04:42:56 dashtinejad

啊好吧，这和我做的一样，但我有一些与定位有关的问题。如果描述过长，则描述将置于我的投资组合项目下，而不是推下内容。我只能得到的描述显示左对齐，而不是在中心 – ve1jdramas 2014-10-06 04:52:36

我相信有可能**完全**你想要什么，但它很复杂。我认为它值得去做，而不是涉及JS和改变mixitup的算法... – dashtinejad 2014-10-06 04:59:23

啊所以整个左对齐问题不能用CSS修复？ – ve1jdramas 2014-10-06 05:04:11

让div出现在活动状态

回答

相关问题