1

因此，我正在尝试创建一个包含导航项堆栈（行）的垂直导航菜单。选择这些行中的一个时，我希望一个菜单从上面滑出（和下面），当此子菜单的顶部到达被单击的行的底部时。这些子菜单还应该有一个起始位置，其中子菜单底部等于相关导航项底部，以便在向下动画时立即可见。

这个定位，停止点和起点，可以在这个小提琴 -> http://jsfiddle.net/pGfCX/57/中看到。只需记下起点和终点。由于 position:relative 的性质，小提琴的其余部分被破坏了。

我认为 z-index 可以修复后续导航项的推送（正如您在刚刚链接的小提琴中看到的那样）......但这似乎不起作用。看起来只有 position:absolute 会启用正确的重叠（即子菜单隐藏在其上方的元素下方并覆盖其下方的元素）。不幸的是，这也有它的缺点。正如您在这个小提琴中看到的那样：http: //jsfiddle.net/pGfCX/60/。您会注意到起始位置和结束位置始终相同，因为我每次都使用相同的类。尽管我可以将每个子菜单都专门定位为它自己的唯一 ID，但这将非常低效且难以维护。

Bsically，我需要两种方法的混合......开始/结束位置的相对定位和绝对位置以实现正确的重叠。

希望这是有道理的......我真的需要帮助。我坚持使用这两种方法，但都没有工作。这令人沮丧。

这是我当前的 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();

});

非常感谢任何和所有帮助。谢谢！

编辑*新方法...导航项内的菜单，使其具有绝对定位并相对于导航项。但是，z-index 似乎关闭了（即，它在导航项（它是父项）之上进行动画处理，尽管 z-index 会提出其他建议：

http://jsfiddle.net/pGfCX/81/

4

2 回答 2

1

编辑：回滚到这个版本，因为虽然这不是一个答案，但它最好作为一个类似的替代方案。

http://jsfiddle.net/pGfCX/70/

这似乎是你喜欢的工作。保持相对定位，修复你的 z-index，并给 .row 一个背景颜色 :) 让我无休止地困惑，因为我的 z-index 看起来坏了，但这是因为元素在 .row 之下（你可以看到顶部的文本)，但因为它在容器上有灰色背景，所以它看起来好像不在行后面。应该是纯 CSS 修复：

#container{
    background:grey;
    width:100px;
    height:100%;
    position:relative;
    top:0;
    left:0;
    z-index:1;
}
.row{
    width:100px;
    height:40px;
    cursor:pointer;
    position:relative;
    z-index:1100;
    background-color: pink;
}
 .row:hover{
    background:red;
}
.menu{
    background:yellow;
    width:100px;
    height:300px;
    position:relative;
    top:-100%;
    left:0;
    z-index:2;
    display:none;
}
.menu .row {
    z-index: 10;   
}

​</p>

于 2012-11-30T03:44:41.310 回答
0

如果您不top为那些绝对定位的.menu元素设置规则，它们将直接悬挂在.row每个元素之前的相对定位元素的下方，而不是浮动到#container. 然后，您可以使用 jQueryslideDown()和slideUp()动画从所需位置显示/隐藏菜单。

jsFiddle 的工作示例

示例代码

CSS

#container {
    background:#666;
    width:100px;
    height:100%;
    position:fixed;
    top:0;
    left:0;
   z-index: 10;
}
.row {
    width:100px;
    height:40px;
    cursor:pointer;
    position:relative;
    z-index:1;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    box-shadow: inset 0px 40px 40px -40px #fff;
}
.row:hover {
    background:red;
}
.row.active {
    background: #333;
    color: #fff;
}    
.menu {
    background: #999;
    width:100px;
    height:auto;
    position:absolute;
    left:0;
    z-index: 2;
    display:none;
    box-shadow: 0px 4px 1px rgba(0,0,0,0.3);
}

JS

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

    // Stops the handler from firing if an animation is in progress
    if (!$('#container').is('.working')) {

        // Begin manipulating the menu...
        $('#container').addClass('working');

        // Defines how fast menus will slide up/down
        var slideSpeed = 200;    

        // If menus need to be hidden, wait for them to slide up, otherwise, don't bother
        var d = ($(this).parent().children('.row.active').length > 0) ? slideSpeed : 0;

        // IF this rowhead is collapsed, expand it and collapse expanded siblings
        if (!$(this).is('.active')) {

// Collapse the active menu at this level, if any             
            $(this).siblings('.row.active').removeClass('active').next('.menu').slideUp(d, function(){
             // When this menu is hidden, collapse all expanded submenus
             $(this).find('.row').removeClass('active');
             $(this).find('.menu').hide();
        });

        // Expand this menu after others have finished collapsing
        window.setTimeout(function(a){

            // Fallback for bodyless rowheads: skips wait if this rowhead has no menu
            b = ($(a).parent().find('.row.active').length > 0) ? slideSpeed : 0;

            // Expand this menu
            $(a).addClass('active').next('.menu').slideDown(slideSpeed, function(){
                // Ready container for more interaction after menu (if any) expands 
                $('#container').removeClass('working');            
            });
        },d,this);
    }

    // Otherwise, if this menu is expanded, collapse it                          
    else $(this).removeClass('active').next('.menu').slideUp(d, function(){ 

         // When this menu is hidden, collapse all expanded submenus
         $(this).find('.row').removeClass('active');
         $(this).find('.menu').hide();

         //Ready the container for more interaction        
         $('#container').removeClass('working');
        });
    }
});

​</p>

于 2012-11-30T06:13:23.937 回答