jQuery的：如何定位/絕對定位的元素相對於另一個元素

Question

所以動畫，我想創建一個包含的導航項目堆棧（行）的垂直導航菜單。當選擇其中一行時，我想要一個菜單​​從上方（和下方）滑出，並且此子菜單的頂部到達被單擊的行的底部。這些子菜單還應該有一個起始位置，其中子菜單底部等於相關的導航項目底部，以便在向下動畫時立即可見。 >http://jsfiddle.net/pGfCX/57/ -

這種定位，停止和啓動點，可以在這個小提琴可見。只要注意開始點和結束點。由於位置的性質：相對而言，小提琴的其餘部分被打破。

我認爲的z-index可以解決後續的導航項目的推動（你可以在短短的鏈接的小提琴看）......然而，這似乎並沒有工作。它看起來像只有位置：絕對將啓用適當的重疊（即子菜單隱藏在它上面的元素下面，並覆蓋它下面的元素）。不幸的是，這也有問題。正如你可以在這個小提琴中看到的那樣：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/

Answer 1

編輯：回滾到這個版本，因爲，雖然這不是一個答案，這將更好地發揮類似的替代品。

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

這似乎只要你喜歡一起工作，保持相對定位，解決了您的Z-指標，並給予.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; 
} 

Answer 2

如果不設置那些絕對定位.menu元素top規則，他們會掛出正下方的相對定位.row元素前面每一個而不是浮動到#container的頂部。然後，您可以使用jQuery的slideDown()和slideUp()動畫來顯示/隱藏菜單的所需位置。

Working Example在的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'); 
     }); 
    } 
});