Thank you in advance for any help or advice, and please excuse my imperfect English :)
I currently have an HTML element like this:
<a id="menu-click" onclick="$('#menu-left').slideToggle('fast');return false;"></a>
Clicking on this element opens a menu that slides down, which works fine. However, due to the presence of draggable boxes on the page, this menu can slide under them. My goal is to increase the z-index value by 1 of the highest z-index element on the page after clicking on "menu-click." This functionality should also apply to other similar elements.
I have already implemented a jQuery function for the draggable boxes, and it functions correctly. However, I am unsure how to create a function for elements that open after clicking on another element.
Below is the function I am using for the boxes:
$(function() {
var c = [
"#box1",
"#box2",
"#box3",
"#box4"
];
var boxes = c.join(", ");
// Set up mousedown handlers for each box
$(boxes).mousedown(function() {
var el = $(this), // The box that was clicked
max = 0;
// Find the highest z-index
$(boxes).each(function() {
// Find the current z-index value
var z = parseInt( $( this ).css( "z-index" ), 10 );
// Keep either the current max, or the current z-index, whichever is higher
max = Math.max( max, z );
});
// Set the box that was clicked to the highest z-index plus one
el.css("z-index", max + 1 );
});
});