通过单击另一个更改元素z-index

时间:2013-11-29 10:14:06

标签: jquery html css z-index

提前感谢任何帮助或建议,如果我的英语不好,请抱歉:)

我有一个像这样的html元素:

<a id="menu-click" onclick="$('#menu-left').slideToggle('fast');return false;"></a>

点击此元素打开一个向下滑动的菜单,这一切都很好。但由于我在页面上有更多可拖动的框,因此该菜单可以在其下滑动。我的意图是,在点击菜单后点击检查页面上的高位z-index将+1添加到此z-index并将其分配给左侧菜单。我需要这个功能适用于更多相似的元素。

我已经使用了jQuery函数用于可拖动的盒子,它工作得很好。但我不知道如何为点击另一个后打开的元素创建一个函数。

这是我用于盒子的功能:

$(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 );
    });
});

1 个答案:

答案 0 :(得分:0)

诀窍在这里。

$(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() {
     $( this ).css( "z-index" , 10); //first assign the value and then get it
    // Find the current z-index value
    var z = parseInt( $( this ).css( "z-index" ));//get the zindex after assigning
    // 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 );
});

});