Javascript 折叠菜单，高度问题

我目前正在设置一个菜单，包括子菜单，建立在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">...

...

子菜单设置为

显示：无

。单击类别时，主菜单下会出现子菜单ul（使用jQuery切换）。我在本地运行它，所以我不能给你一个真实的例子，但它的工作方式与你点击这里的“类别”链接时相同：

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

有什么想法吗

---

谢谢

您能更详细地说明为什么需要定位绝对位置吗？在我看来，您可以通过将所有子菜单静态放置在顶级菜单下方，使用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;
}

$（函数（）{
$（'.menuCat>li'）。单击（函数（e）{
var target=$（'.show hide.'+e.target.title）；
$（'.show hide'）.not（target.hide（）；
target.toggle（）；
});
});
李美努卡特{
显示：内联块；
垂直对齐：顶部；
}
ul.show-hide{
显示：无；
背景颜色：浅灰色；
}
#内容{
高度：200px；
宽度：100%；
背景色：红色；
}

---

例如，请参见此演示：

一些新闻，我想我无法修改HTML结构，因为子菜单与父列表项同时构建，在“start\el”wordpress函数中。该函数将为菜单中的每个类别链接调用

我正在进行绝对定位，因为我非常确定实际的html结构不允许我做其他事情。但是我必须说，jQuery函数起到了关键作用。我的菜单是从一个自定义wordpress Walker类构建的，让我们看看是否可以更改它