jquery - 滑出导航 : Z-Index Issue

Question

edit* 根据第一个回复，这可能无法通过 z-index 解决，因为这是元素定位的问题。这可能是发布新帖子的时候了，但是如果您阅读了我对第一个回复的评论，我可以用绝对位置解决此线程的问题，但会出现另一个问题 -> 设置具有绝对位置的元素的相对位置。 .. 这听起来有点违反直觉，大声笑。无论如何，将尽快删除这个问题，因为这个问题是完全不同的，值得不同的线程。

我正在尝试创建一个垂直导航菜单，其中的子菜单从上方(和后面)滑出并停在每个单击的导航项下方。我目前将 HTML 设置为在它们各自的导航项之后直接具有相关的子菜单，以便使用相对位置，我可以将 jQuery 设置为将子菜单设置为 top:0 的动画，并且它总是直接位于相关导航项的下方.

我将后续导航项设置为添加一个类以减少其 z-index。我希望这将使菜单能够从上方的导航项下方滑出(因为菜单具有较低的 z-index)，同时位于下方项之上。

两者都没有用。正如您从下面链接的我的 fiddle 中看到的那样...菜单不仅会滑过上方的元素，还会将下方的元素推开。

我敢肯定有无数种方法可以做到这一点，但我觉得相对位置是处理多个子菜单的唯一方法，所有子菜单都需要相对于各自的导航项放置。但显然我的方法并非没有缺陷......

因此，我们将不胜感激任何帮助。

http://jsfiddle.net/pGfCX/57/

jQuery:

$('.row').click(function() {

    // make all siblings AFTER row clicked get this class to reduce z-index and allow the menu to display above these rows (while still remaining below the rows above)

    $(this).nextAll().addClass('rowZ');
    $(this).next('.menu').show()
    $(this).next('.menu').animate({'top':'0'});

});

// when menu is out, the row clicked is the header row, upon clicking this, the related menu (and by default, all subsequent menus within) animate back up and hide

$('.rowHead').click(function() {

    $(this).next('.menu').animate({'top':'-100%'});
    $(this).next('.menu').hide();

});

您还会注意到，我添加了一个类，用于在单击导航项并打开其子菜单时更改导航项的颜色。我想在单击此类时让子菜单重新出现...但这也不起作用吗？但这是一个不同的问题，可能是另一个线程。

在此先感谢您提供的所有帮助。

Answer 1

如果您希望您的子菜单项出现在其他菜单项之上，您需要使用 position:absolute 将它们从文档的正常流中移除。使用 position: relative 时，子菜单项的高度被考虑在内，将菜单项元素向下推。

示例:http://jsfiddle.net/Ps73y/3/

HTML

<div id="container">
    <div class="menu-item">
        <div>Menu Item 1</div>
        <div class="sub-menu-items">
            <div class="sub-menu-item">Sub Menu Item 1</div>            
            <div class="sub-menu-item">Sub Menu Item 2</div>            
        </div>
    </div>
    <div class="menu-item">
        <div>Menu Item 2</div>
        <div class="sub-menu-items">
            <div class="sub-menu-item">Sub Menu Item 1</div>            
            <div class="sub-menu-item">Sub Menu Item 2</div>            
        </div>
    </div>
</div>

CSS

.sub-menu-items{
   position: absolute;
   display: none;
   top: 0;
   background: red;
   z-index:1100;
}

.sub-menu-item{
    width:120px;
    cursor:pointer;
    position: relative;
}

.menu-item{
    background:yellow;
    width:120px;
    position:relative;
    left:0;
    cursor: pointer;
}

#container{
    background:grey;
    width:120px;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:0;
}

Javascript

$(".menu-item").click(function(){
    $(this).find(".sub-menu-items").css("top", $(this).height());
    $(this).find(".sub-menu-items").slideToggle();
});