同じ寸法の 4 つの divがある Web サイトを作成しています。任意の 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 を 2 回目にクリックして最小化する場合を除いて正常に動作し、z-index プロパティは残ります。行きたい。どうすればこれを達成できますか?