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

JQuery animation and z-index are not working correctly

本文关键字：工作 常工作 动画 z-index 不能 JQuery      更新时间：2023-09-26

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

小提琴

一切正常，当我这样做:

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

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

但是当我这样做的时候:

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

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

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

请帮我解决这个问题。

它在上面的原因是由于html。红色是在绿色之前创建的，所以让它们每次都在彼此的"下面"动画的唯一方法是通过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");
}

红色也一样…

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

检查是否有效包含在css

 .open-first{
    z-index:-1 !important;
}
.open{
    z-index:1;
}
相关文章：