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", '');

摘自the documentation：

将样式属性的值设置为空字符串 - 例如 $（＆＃39;＃mydiv＆＃39;）。css（＆＃39; color＆＃39;，＆＃39;＆＃39;） - 从元素中删除该属性如果已经直接应用，则是否为HTML样式属性，通过jQuery的.css（）方法，或通过直接DOM 操纵样式属性。但是，它不会删除已在样式表或。中应用CSS规则的样式元件。

Answer 2

您可以使用jQuery中的.css()删除

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

试试这个

Answer 3

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

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

CSS语法

z-index：auto | number | initial | inherit;

auto ：将堆栈顺序设置为等于其父项。这是默认的
数字：设置元素的堆叠顺序。允许使用负数
initial ：将此属性设置为其默认值。阅读初始
inherit ：从其父元素继承此属性。

Answer 4

而不是：

$("#one").removeAttr("z-index");

从CSS中删除它：

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

或者，也许

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

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

4 个答案: