JQuery动画和z索引不能正常工作。

Question

我正在尝试做两个面板，可以打开和关闭两个按钮。

小提琴

当我这样做的时候，一切都很好：

1. 打开红色面板。
2. 打开绿色面板。
3. 关闭红色面板。

在这种情况下，红色面板隐藏在绿色动画的后面。

但当我喜欢这样的时候：

1. 打开绿色面板。
2. 打开红色面板。
3. 关闭绿色面板。

在动画期间，绿色面板总是在红色面板的前面。

但是第一个打开的面板有z-index: 9，第二个打开的有z-index: 10。

请帮我解决这个问题。

Answer 1

它高于它的原因是由于html。红色是在绿色之前创建的，所以每次让它们“在下面”动画的唯一方法是通过if语句以编程方式编辑z索引。

在if语句中，只需更改z索引：

if ($messengerPanel.hasClass('open')) {
    sidebarPanelClose($messengerPanel);
    $("#green").css("z-index", "1");
} else {
    sidebarPanelOpen($messengerPanel);
    $("#green").css("z-index", "10");
}

红色也一样..。

更新小提琴：http://jsfiddle.net/rcotjr5y/4/

Answer 2

检查css中是否包含它。

 .open-first{
    z-index:-1 !important;
}
.open{
    z-index:1;
}