Question

我有一些水平排列的div，可以作为导航栏上的按钮。单击此按钮时，隐藏的子菜单div将显示在单击的按钮下方，但高于所有其他按钮。

问题：出现的子菜单div保持在所有其他按钮div之上，即使z-index如果单击的按钮div被更改为大于子菜单div z-index 1}}。很高兴能得到一些帮助！：）

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样式中添加一个位置。

Z指数＆amp; jQuery Toggle

1 个答案: