摺疊菜單，高度問題

Question

我目前正在設置一個菜單，包括建立在WordPress類別上的子菜單。基本上，我正在檢索所有頂級類別，然後在每個類別上創建一個子菜單，並附帶所有來自該父類別的帖子。

所以結構是這樣的：

<ul class="menuCat"> 
    <li> <a href="#" title="lifestyle">lifestyle</a> 
     <ul class="show-hide"> 
     <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li> 
     <li><a href="http://localhost/wordpress/article-5/">Article #5</a></li> 
     <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li> 
     </ul> 
    </li> 
    <li> <a href="#" title="musique">musique</a> 
     <ul class="show-hide"> 
     <li><a href="http://localhost/wordpress/article-8/">Article #8</a></li> 
     <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li> 
     <li><a href="http://localhost/wordpress/article-2/">Article #2</a></li> 
     <li><a href="http://localhost/wordpress/article-1/">Article #1</a></li> 
     <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li> 
     </ul> 
    </li> 
</ul> 
<div id="content">... 

子菜單設置爲display:none。當一個類別被點擊時，子菜單ul出現（使用jQuery切換）在主菜單下。我在本地運行它，所以我不能給你一個實例，但它的工作方式與當您點擊這裏的「類別」鏈接時相同：http://wpshower.com/demo/?theme=imbalance。

我的問題是，這種結構和我想在視覺上達到（c.f前一個URL）是什麼，我沒有看到，把子塊的絕對位置的任何其他選項。但是如果我這樣做了，當菜單被觸發時，我需要將其餘內容向下推。到目前爲止，我嘗試過的方法是根據當前查看的子菜單的高度設置頁邊距。不幸的是，無論是高度還是outerHeight可以幫我...

任何想法？

謝謝！

Answer 1

你可以進入更詳細的關於爲什麼你需要絕對定位？在我看來，您可以通過將所有子菜單靜態地放置在頂層菜單下面來實現自己想要的功能，使用jQuery確保一次只顯示一個子菜單。

通過使它們靜態定位時，它擴展了子菜單將推動下面下來的內容，只要所有，但一個子菜單總是被設置爲顯示：無;你甚至不知道它在那裏。

對於這個工作，但是，你需要改變，雖然HTML的結構。子菜單項需要位於頂層菜單列表下方的div中，而不在其中。

<ul class="menuCat"> 
    <li> <a href="#" title="lifestyle">lifestyle</a> 
    </li> 
    <li> <a href="#" title="musique">musique</a> 
    </li> 
</ul> 
<div id="submenu-container"> 
     <ul class="show-hide lifestyle"> 
     <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li> 
     <li><a href="http://localhost/wordpress/article-5/">Article #5</a></li> 
     <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li> 
     </ul> 
     <ul class="show-hide musique"> 
     <li><a href="http://localhost/wordpress/article-8/">Article #8</a></li> 
     <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li> 
     <li><a href="http://localhost/wordpress/article-2/">Article #2</a></li> 
     <li><a href="http://localhost/wordpress/article-1/">Article #1</a></li> 
     <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li> 
     </ul> 
</div> 
<div id="content"></div> 

$(function() { 
    $('.menuCat > li').click(function (e) { 
     var target = $('.show-hide.' + e.target.title); 
     $('.show-hide').not(target).hide(); 
     target.toggle(); 
    }); 
}); 



ul.menuCat li { 
    display:inline-block; 
    vertical-align: top; 
} 
ul.show-hide { 
    display: none; 
    background-color:lightgrey; 
} 
#content { 
    height: 200px; 
    width: 100%; 
    background-color: red; 
} 

對於一個例子來看看這個演示：http://jsfiddle.net/ijoukov/PCgxR/

Answer 2

一些消息，我想我不能修改HTML結構，因爲子菜單內置在同一時間與父列表項，內'start_el'wordpress功能。該功能會在菜單中爲每個分類鏈接調用。