折叠菜单，高度问题

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。当一个类别被点击时，子菜单会出现在主菜单下（使用 jQuery 切换）。我在本地运行它，所以我不能给你一个活生生的例子，但它的工作方式与你点击此处的“类别”链接时相同：http://wpshower.com/demo/?theme=imbalance。

我的问题是，对于这种结构以及我想要在视觉上实现的目标（c.f 以前的 url），我看不到任何其他将子菜单块置于绝对位置的选项。但如果我这样做，我需要在触发菜单时将其余内容向下推。到目前为止，我尝试过的是根据当前查看的子菜单的高度设置顶部边距。不幸的是，height 或 outerHeight 都无法帮助我...

有什么想法吗？

谢谢！

Answer 1

您能否详细说明为什么需要绝对定位？在我看来，您可以通过将所有子菜单静态定位在顶级菜单下方，使用 jQuery 确保一次只显示一个来实现您想要的。

通过将它们静态定位，子菜单在展开时会将其下方的内容向下推，并且只要始终将除一个子菜单之外的所有子菜单设置为 display: none;你甚至都不知道它的存在。

但是，要使其正常工作，您需要更改 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 函数中。菜单中的每个类别链接都会调用该函数。