2012-08-13 61 views
0

我需要一種方法來隱藏父項<li>,但保持子項<ul>可見。在菜單中隱藏父項但不是子項

因此,舉例來說,我有以下代碼:

<li class="toplevel">Link 
    <ul> 
    <li class="secondlevel">Link</li> 
    </ul> 
<li> 

基本上,我想這個類頂層被隱藏,但類第二級別可見。現在我知道我可以用css做到這一點:

visibility:hidden/visibility:visible 

但是,這會保持隱藏類的高度和寬度。我需要使用更像是:

display:none/display:inline 

不過,當然,這並不因爲孩子沒有表現出工作,沒有一個方法,使之重新顯示它出現。

除了使用可見性來隱藏父項,還有其他的方法,讓孩子保持隱藏父項的高度/寬度不變嗎?

謝謝。

+1

這將是更容易,如果你能幫助你:

<li class="toplevel"><span>Link</span> <ul> <li class="secondlevel">Link</li> </ul> </li> 

然後,這個標記設置display:none提供了一個例子,因爲我們將能夠爲您提供更符合您需求的更準確的解決方案。 http://www.jsfiddle.com是個舉例的好地方。 – 2012-08-13 12:31:14

回答

5

不可能隱藏parent並顯示它的children

你可以把你要隱藏到一些內嵌代碼頂級鏈接:

li > span { display: none } 
+0

與WordPress生成的菜單很難做到這一點。已經有一個球疼得到他們現在正確顯示! – Tenatious 2012-08-13 12:25:57

+1

隱藏「父」並顯示它是「孩子」是不可能的。當然,你可以使用'jQuery',但它不會「不那麼困難」。無論如何,如果你想我可以使用'jQuery'顯示可能的解決方案。 – 2012-08-13 12:31:32

+0

正如愛德華告訴你的,這是不可能的。實現菜單的另一種方式是需要的。 Edward提供的解決方案實際上非常好,並且Twitter Bootstrap使用相同的*類型解決方案來生成它們的導航欄。 – 2012-08-13 12:32:37