index are not working correctly

I am trying to make two panels which can be opened and closed by two buttons.

FIDDLE

All is working fine, when I do like this:

Open red panel.

Open green panel.

Close red panel.

In this case red panel is hiding behind green during animation.

But when I do like this:

Open green panel.

Open red panel.

Close green panel.

The green panel always in front of red panel during animation.

But the first opened panel has z-index: 9 and the second opened one has z-index: 10 .

Please, help me to solve the problem.

---

The reason why it goes above it is due to the html. the red was created before the green so the only way to make them animate 'underneath' each other every time would be to edit the z-index programmatically through the if statements

In the if statements just change z-index :

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

Same for red too ...

Updated fiddle : http://jsfiddle.net/rcotjr5y/4/

---

检查它是否会工作包括在CSS中

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

链接地址: http://www.djcxy.com/p/85388.html

上一篇: C / C ++ BLE读/写示例与Bluez

下一篇: 索引无法正常工作