Z-index＆jQuery Toggle

Question

我有一些水平排列的div，用作導航欄上的按鈕。點擊此按鈕後，會在被點擊的按鈕下方顯示隱藏的子菜單div，但最重要的是其他按鈕。

問題：一項保持高於其他所有按鈕的div即使z-index如果被點擊的按鈕DIV改爲比子菜單div的z-index較大的子菜單股利。將很高興有這個幫助！ :)

HTML代碼

<div class="filter_tab" id="filter_tab_rent"><p>Min/Max Rent</p></div> 
    <div id="filter_submenu_rent"> 
     Hello 
</div> 

jQuery代碼

$("#filter_tab_rent").click(function(e) { 
    $("#filter_tab_rent").toggleClass('filter_tab_selected'); 
    $("#filter_submenu_rent").toggle(); 
}); 

CSS代碼

.filter_tab { 
    height: 38px; 
    min-width: 50px; 
    border: 1px solid #D9D9D9; 
    border-bottom: none; 
    float: left; 

}

.filter_tab_selected { 
    z-index: 500 
} 

#filter_submenu_rent { 
    width: 300px; 
    height: 50px; 
    background: #FFF; 
    position: absolute; 
    top: 65px; 
    display: none; 
    z-index: 100; 
    border: 1px solid #D9D9D9; 
    box-shadow: 0px 2px 5px #888; 

}

附加信息：我使用Chrome瀏覽這個。

Answer 1

z-index僅適用於元素相對位置和絕對位置。爲您的.filter_tab_selected樣式添加一個位置。