JQuery 动画和 z-index 工作不正常

Question

我正在尝试制作两个可以通过两个按钮打开和关闭的面板。

FIDDLE

一切正常，当我这样做时：

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

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

但是当我这样做的时候:

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

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

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

请帮我解决问题。

Answer 1

之所以超过它是因为html。红色是在绿色之前创建的，所以让它们每次都彼此动画 'underneath' 的唯一方法是通过 if 语句

以编程方式编辑 z-index

在 if 语句中只需更改 z-index ：

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

红色也一样...

已更新 fiddle：http://jsfiddle.net/rcotjr5y/4/

Answer 2

检查它是否有效 包括在 css

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