基於li類使用css的顯示塊

我有這個以下結構：

<div class="menu_left"> 
    <ul> 
     <li class="current">A</li> 
     <li>B</li> 
    </ul> 

    <ul> 
     <li>C</li> 
     <li>D</li> 
    </ul> 
</div>

我的CSS是

.menu_left ul li ul { display:none; }

現在我要爲display：block對於具有鋰類電流UL。所以在上面的例子中，我想顯示：第二個ul沒有，但第一個沒有。

說實話，我完全沒有線索，如果這可以通過CSS或jqyery完成。

任何幫助/提示是高度讚賞。提前致謝。

來源

2014-11-05 Raj

的'.menu_left UL李ul'聲明假設你已經在你李的UL UL，事實並非如此。另外，你在說'menu_left'使用下劃線，這不是HTML類'menu-left'的情況。 – 2014-11-05 11:43:57

修復感謝指出。 – Raj 2014-11-05 11:46:55

也，我會使用'！重要的'語句來做到這一點只有在CSS。這是這個想法：'.menu_left ul li {display：none; } .current {display：block！important; }'。你需要嗎？ – 2014-11-05 11:49:31

由於沒有CSS父母選擇器，目前沒有辦法單獨使用CSS來完成此操作。

要使用jQuery來做到這一點，很簡單，使用closest()（或.parent()）。

注意你的CSS選擇器是不正確的，因爲它代表不會匹配任何東西：

CSS

.menu-left ul { 
    display:none; 
}

jQuery的

JSFiddle

來源

2014-11-05 11:40:16 George

非常感謝你爲這個驚人的解決方案。 – Raj 2014-11-05 13:23:26

這不可能使用普通的CSS。但是你可以做這樣的事情用jQuery：

$('ul li.current').parent().css('display', 'block');

這將選擇所有li小號有current類，然後設置display: block其父。

來源

2014-11-05 11:41:26 TheFrozenOne

你必須去用JavaScript在這裏，因爲沒有:parent CSS選擇器（還）：

$('.menu-left ul').hide(); // hide all UL 
$('.menu-left li.current').parent().show(); // Show the one with .current LI

來源

2014-11-05 11:41:42 dfsq

基於li類使用css的顯示塊

回答

相關問題