javascript - 尝试使用 HTML5/CSS3/JS 创建带有 z-index 的堆叠菜单

Question

我到处寻找解决方案，但找不到任何具体的解决方案，我知道这是非常可行的，但我认为我缺乏 JavaScript 经验限制了我在这里的使用。 基本上我有 5 个 div，每个都像一个按钮。我希望每个按钮使另一个与 5 个按钮无关的 div 出现。我称它们为“Menubox1/2/3/4”，每个都链接到每个。我的第一个想法是将所有菜单堆叠在一起，顶部有一个空白菜单，z-index 为 5。

然后通过在 div 按钮上使用“onclick”方法，我会告诉它获取其各自菜单的元素并将其 z-index 增加到 6，以位于堆的顶部。我还会告诉它让所有其他菜单转到 4，低于其余菜单。

如此有效，每个按钮都会使与其关联的菜单出现在具有最高 z-index 的顶部，并且还会隐藏其他菜单框，以便没有其他框位于同一级别。

我找到了一种方法让它与这个 JS 一起工作

//Shows the current menu on top
  function showstuff(boxid) {
            document.getElementById(boxid).style.zIndex="5";
        }
//Hides the rest of them.
        function hidestuff(boxid) {
            document.getElementById(boxid).style.zindex="3";
        }



<div onclick="showstuff('Menu1'); hidestuff('Menu2'); hidestuff('Menu3');" ;style="cursor:pointer;">

通过将相应的 boxid 放入“onclick”中，一切正常，但问题是它只能工作一次，每次单击时我都需要它工作。

如果有人需要更多信息，我会提供。

Answer 1

为什么不在要隐藏/显示的 Pane 上使用 visibility:hidden/visible 呢？这将需要在每次单击时重置每个 Pane 上的该属性，但您不必担心浏览器如何呈现 z-index，或者是否有任何时候在呈现时您会看到多个 div 呈现的奇怪显示，而只有一个应该。