Javascript 尝试使用z-index'；创建堆叠菜单；使用HTML5/CSS3/JS

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

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

因此，每个按钮都会有效地使与其关联的菜单以最高的z索引显示在顶部，并隐藏其他菜单框，以便没有其他框位于同一级别

我已经找到了一种方法使它与这个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;">

//在顶部显示当前菜单
函数showstuff（boxid）{
document.getElementById（boxid.style.zIndex=“5”；
}
//隐藏其余的部分。
函数hidestuff（boxid）{
document.getElementById（boxid.style.zindex=“3”；
}

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

---

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

为什么不在要隐藏/显示的窗格上使用

可见性：隐藏/可见

？每次单击都需要在每个窗格上重置该属性，但您不必担心浏览器如何呈现z-index，或者在渲染过程中是否会出现多个div渲染的奇怪显示，而只有一个div渲染。

好主意，更有意义，这在让JS使用它方面是如何工作的？而且，按钮在多次点击后也能工作，因为这一点也很重要：）是的，多次点击也能正常工作。你可以在你的代码中做同样的事情，但是在函数showtuff中使用

document.getElementById（boxid）.style.visibility=“visible”

，在函数hidestuff中使用

document.getElementById（boxid）.style.visibility=“hidden”

，这太完美了！非常感谢！：）