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切换）。我在本地运行它，所以我无法给你一个实例，但它的工作方式与你点击＆＃34;类别时的情况相同。链接到这里：http://wpshower.com/demo/?theme=imbalance。

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

有什么想法吗？

谢谢！

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函数中与父列表项同时构建的。为菜单中的每个类别链接调用该函数。

折叠菜单，高度问题

2 个答案: