javascript - 折叠菜单，高度问题

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 .

我的问题是，对于这种结构和我想要实现的视觉效果(参见之前的 url)，我看不到任何其他选项可以将子菜单 block 置于绝对位置。但如果我这样做，我需要在触发菜单时将其余内容向下推。到目前为止，我尝试过的是根据当前查看的子菜单的高度设置边距顶部。不幸的是， 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/