Cách xóa thuộc tính chỉ mục z bằng cách sử dụng jQuery

Question

Tôi đang tạo trang web có 4 div có kích thước bằng nhau. Nếu tôi , hãy nhấp vào bất kỳ div nào sẽ tối đa hóa để bao gồm 3 div còn lại. Để đạt được điều này, tôi cần sử dụng thuộc tính z-index. Tôi không chỉ định z-index theo kiểu và chỉ thêm nó bằng jQuery khi tôi nhấp vào bất kỳ div nào. Đây là mã của tôi cho một 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> 

Và đây là jQuery mã cho tối đa hóa:

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

Đoạn mã trên hoạt động tốt trừ khi tôi nhấp vào lần thứ hai div để giảm thiểu nó, z- tài sản chỉ mục vẫn còn. Tôi muốn nó đi. Làm thế nào tôi có thể đạt được điều này?

Answer 1

Chỉ mục z không phải là thuộc tính.

Như đã nêu trong tài liệu hướng dẫn, bạn có thể làm

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

Extract từ the documentation:

Thiết lập giá trị của một thuộc tính cho một chuỗi rỗng - ví dụ Css ('color', '') - loại bỏ thuộc tính đó khỏi một phần tử nếu nó đã được áp dụng trực tiếp, cho dù thuộc tính kiểu HTML , thông qua phương thức .css() của jQuery, hoặc thông qua thao tác DOM trực tiếp thuộc tính kiểu. Tuy nhiên, nó không xóa kiểu đã được áp dụng với quy tắc CSS trong biểu định kiểu hoặc thành phần .

Answer 2

Bạn có thể loại bỏ bằng .css() trong jQuery

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

thử như thế này

Answer 3

Thay vì:

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

Tháo cửa ra khỏi CSS:

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

Hoặc, đánh giá cao s

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

Answer 4

Sử dụng ban đầu để thiết lập lại z-index trở lại giá trị mặc định của nó

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

CSS Cú pháp

z-index: auto | số | ban đầu | kế thừa;

• tự động: Đặt thứ tự ngăn xếp bằng với cha mẹ. Đây là mặc định
• số: Đặt thứ tự ngăn xếp của phần tử.Số âm được phép
• ban đầu: Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
• kế thừa: Thừa kế thuộc tính này từ phần tử gốc.