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

Question

I have looked all over for a solution but can't find anything specific and I know it is very doable but I think my lack of experience with JavaScript is limiting me here. Essentially I have 5 divs, each one acts like a button. I want each button to make another div unrelated to the 5 buttons to appear. I called them "Menubox1/2/3/4" and each one is linked to each one. My first idea was to have all the menus stacked on top of each other with a blank one on top with a z-index of 5.

And then by using the "onclick" method on the div button, I would tell it to get the element of its respective menu and increase its z-index to 6, to go on top of the pile. I would also tell it to make all the other menus go to 4, to go below the rest.

So effectively each button would make the menu associated with it appear on top with the highest z-index and also hide the other menu boxes so that no other box is on the same level.

I have found a way to make it work with this 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;">

And by putting the respective boxid in the "onclick" , it all works but the problem is it only works once, and I need it to work every time each one is clicked.

If anyone needs more information I an provide.

Answer 1

Why don't you just use visibility:hidden/visible on the panes you want to hide/display? It would require resetting that attribute on each pane on each click, but you don't have to worry about how browsers render z-index, or if there are any times in rendering where you get a weird display of multiple divs rendering when only one should.