如何使用jQuery删除z-index属性

Question

我正在创建一个网站,其中有4个相同维度的div.如果我单击任何div,它将最大化以覆盖剩余的3个div.为此,我需要使用z-index属性.我没有在样式中指定z-index,只在单击任何div时使用jQuery添加它.这是我的div代码:

<div id="one" style="background: #58D3F7; height: 200px; width: 200px; position: absolute;
    margin-left: 410px; margin-top: 202px; float: left; cursor: pointer; text-align: center;"></div>

这里是用于最大化的jQuery代码:

$(function () {
    var state = true;
    $("#one").click(function () {
        if (state) {
            $("#one").animate({
                height: 300,
                top: -100
            }, 1000);
            $("#one").css({ "z-index": "1" });
            $("#one").animate({
                width: 300,
                left: -100
            }, 1000);
            $("#itxt1").animate({
                color: "#58D3F7"
            }, 1000);
            $("#one").animate({
                height: 650,
                width: 650
            }, 1000);
        } else {
            $("#one").animate({
                backgroundColor: "#58D3F7",
                height: 200,
                width: 200,
                left: 8,
                top: 8,
                opacity: 1
            }, 1000);
            $("#one").removeAttr("z-index");
        }
        state = !state;
    });
});

上面的代码工作正常,除非我第二次单击div以最小化它,z-index属性仍然存在.我希望它去.我怎样才能做到这一点？

Answer 1

z-index不是属性.

如文档中所述,您可以这样做

$("#one").css("z-index", '');

摘自文档:

将style属性的值设置为空字符串 - 例如$('#mydiv').css('color','') - 如果已经直接应用了元素,则从元素中删除该属性,无论是HTML样式属性,通过jQuery的.css()方法,或通过样式属性的直接DOM操作.但是,它不会删除样式表或元素中使用CSS规则应用的样式.

Answer 2

使用initial将z-index重置回默认值

$('#id').css('z-index','initial');

CSS 语法

z-index：自动|数字|初始|继承；

• auto：将堆栈顺序设置为其父级。这是默认的
• number：设置元素的堆栈顺序。允许负数
• 初始：将此属性设置为其默认值。阅读有关初始
• 继承：从其父元素继承此属性。