Question

编辑*基于第一个回复，这可能无法通过z-index修复，因为这是元素定位的问题。这可能是新帖子的时间，但是如果你读到我对第一个回复的评论，我可以用绝对位置来修复这个帖子的问题，但是出现了另一个问题 - ＆gt;设置一个具有绝对位置的元素的相对位置...听起来有点反直觉，哈哈。无论如何，将很快删除这个问题，因为问题完全不同，并且应该有不同的主题。

我正在尝试创建一个垂直导航菜单，其子菜单从上方（和后方）滑出，并在单击的每个导航项下方停止。我目前设置HTML以便在相应的导航项之后直接使用相关的子菜单，这样我可以设置jQuery将子菜单设置为top：0并且它总是直接位于它的相关导航项下面

我将后续导航项设置为添加了一个减少z-index的类。我希望这会使菜单从上面的导航项目下方滑出（因为菜单的z-index较低），同时覆盖较低的项目。

两者都没有奏效。正如你从下面链接的小提琴中看到的那样......不仅菜单滑过上面的物品，它还将较低的物品推开。

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

所以任何帮助都会非常感激。

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();
});

滑出导航：Z-Index问题

1 个答案: