我正在尝试制作两个可以通过两个按钮打开和关闭的面板.
一切正常,当我喜欢这样的时候:
>打开红色面板.
>打开绿色面板.
>关闭红色面板.
在这种情况下,红色面板在动画期间隐藏在绿色背后.
但是当我喜欢这样的时候:
>打开绿色面板.
>打开红色面板.
>关闭绿色面板.
动画期间,绿色面板始终位于红色面板的前面.
但是第一个打开的面板有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"); }
红色也一样……