讓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出現在活動狀態

回答

相關問題