5

我正在创建一个网站，其中有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 属性仍然存在。我想让它走。我怎样才能做到这一点？

4

4 回答 4

14

z-index 不是属性。

如文档中所述，您可以执行

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

从文档中提取：

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

于 2013-06-11T11:05:55.130 回答
5

Use initial to reset z-index back to its default value

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

CSS Syntax

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

  • auto: Sets the stack order equal to its parents. This is default
  • number: Sets the stack order of the element. Negative numbers are allowed
  • initial: Sets this property to its default value. Read about initial
  • inherit: Inherits this property from its parent element.
于 2015-04-21T15:44:43.100 回答
2

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

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

试试这样

于 2013-06-11T11:05:16.680 回答
1

代替：

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

从 CSS 中删除它：

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

也许

$("#one").css("z-index", "auto");
于 2013-06-11T11:05:53.403 回答