折叠菜单，高度问题

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)，我看不到任何其他将子菜单块放在绝对位置的选项。但如果我这样做了，当菜单被触发时，我需要向下推送其余的内容。到目前为止，我尝试的是基于当前查看的子菜单的高度设置页边距顶部。不幸的是，无论是height还是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

一些新闻，我想我不能修改超文本标记语言的结构，因为子菜单是在'start_el‘wordpress函数中与父列表项同时构建的。该函数将为菜单中的每个类别链接调用。