嘗試使用HTML5 / CSS3 / JS創建帶有z-index的堆疊菜單

Question

我到處都在尋找解決方案，但是找不到任何具體的解決方案，我知道這是非常可行的，但是我認為我對JavaScript的缺乏經驗限制了我的工作。 本質上，我有5個div，每個div的行為都像一個按鈕。 我希望每個按鈕都使另一個div與出現的5個按鈕無關。 我稱它們為“ Menubox1 / 2/3/4”，每個都鏈接到每個。 我的第一個想法是將所有菜單堆疊在一起，空白菜單的z索引為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

您為什么不只使用visibility:hidden/visible要隱藏/顯示的窗格上的visibility:hidden/visible ？ 這將需要在每次單擊時在每個窗格上重置該屬性，但是您不必擔心瀏覽器如何渲染z-index，或者在渲染中是否有任何時候只有一次一個顯示多個div渲染的怪異顯示。應該。