Jquery를 사용하여 Z- 인덱스를 사용하여 루프

Question

그래, 이건 바보 같은 질문 일지 모르지만 나는 z- 인덱스를 사용하여 div를 서로 겹치게하려고 노력해 왔습니다. 그러나 실제로 Z- 인덱스 자체를 변경하여 루프를 관리하는 것처럼 보이지 않습니다. 아래의 코드는 찾을 수 :

$(document).ready(function() { 
 
    $("#map1").click(function(){ 
 
    $("#map1").slideUp("slow"); 
 
    }); 
 
    $("#map2").click(function(){ 
 
    $("#map2").slideUp("slow"); 
 
    }); 
 
    $("#map3").click(function(){ 
 
    $("#map3").slideUp("slow"); 
 
    }); 
 
});

#map1, #map2, #map3, #map4 
 
{ 
 
    width: 99%; 
 
    height: 98%; 
 
    position: absolute; 
 
    cursor: pointer; 
 
} 
 

 
#map1 { z-index: 999; } 
 
#map2 { z-index: 998; } 
 
#map3 { z-index: 997; } 
 
#map4 { z-index: 996; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="maps"> 
 
    <div id="map1">Map 1</div> 
 
    <div id="map2">Map 2</div> 
 
    <div id="map3">Map 3</div> 
 
    <div id="map4"> 
 
    <button id="reset">Reset</button> 
 
    </div> 
 
</div>

MAP4에 대한 슬라이드가 없습니다하지만 난 다시 1 페이지로 페이지 점프를 만들거야 그 DIV에 리셋 버튼을 넣을 때문이다. 어떤 도움을 주시면 감사하겠습니다!

Answer 1

z- 주문에 의존하지 마십시오. 다만이처럼 DOM 순서를 사용

$(document).ready(function() { 
 
    $(".map").click(function(){ 
 
    $(this).slideUp("slow"); 
 
    }); 
 
    $("#reset").click(function(){ 
 
    $(".map").slideDown("slow"); 
 
    }); 
 
});

#map1, #map2, #map3, #map4 
 
{ 
 
    width: 99%; 
 
    height: 98%; 
 
    position: absolute; 
 
    cursor: pointer; 
 
} 
 
#map1 
 
{ 
 
    background: red; 
 
} 
 
#map2 
 
{ 
 
    background: green; 
 
} 
 
#map3 
 
{ 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="maps"> 
 
    <div id="map4"> 
 
    <button id="reset">Reset</button> 
 
    </div> 
 
    <div id="map3" class="map">Map 3</div> 
 
    <div id="map2" class="map">Map 2</div> 
 
    <div id="map1" class="map">Map 1</div> 
 
</div>

Answer 2

Demo #1

var m1 = $("#map1").css("z-index"), 
 
\t m2 = $("#map2").css("z-index"), 
 
\t m3 = $("#map3").css("z-index"), 
 
\t m4 = $("#map4").css("z-index"); 
 

 

 
if (m1 > m2 || m1 > m3 || m1 > m4) { 
 
\t $("#map1").css("display", "block"); 
 
\t $("#map2 , #map3 , #map4").css("display", "none"); 
 
} else if (m2 > m1 || m2 > m3 || m2 > m4) { 
 
\t $("#map2").css("display", "block"); 
 
\t $("#map1 , #map3 , #map4").css("display", "none"); 
 
} else if (m3 > m1 || m3 > m2 || m3 > m4) { 
 
\t $("#map3").css("display", "block"); 
 
\t $("#map1 , #map2 , #map4").css("display", "none"); 
 
} else if (m4 > m1 || m4 > m2 || m4 > m3) { 
 
\t $("#map4").css("display", "block"); 
 
\t $("#map1 , #map2 , #map3").css("display", "none"); 
 
} 
 

 
$(document).ready(function() { 
 

 
    $("#map1").click(function(){ 
 
    $("#map1").slideUp("slow", m1Callback); 
 
    function m1Callback() { $("#map2").slideDown("slow"); } 
 
    }); 
 

 
    $("#map2").click(function(){ 
 
    $("#map2").slideUp("slow", m2Callback); 
 
    function m2Callback() { $("#map3").slideDown("slow"); } 
 
    }); 
 

 
    $("#map3").click(function(){ 
 
    $("#map3").slideUp("slow", m3Callback); 
 
    function m3Callback() { $("#map4").slideDown("slow"); } 
 
    }); 
 

 
    $("#map4").click(function(){ 
 
    $("#map4").slideUp("slow", m4Callback); 
 
    function m4Callback() { $("#map1").slideDown("slow"); } 
 
    }); 
 

 
});

#map1, #map2, #map3, #map4 
 
{ 
 
    position: absolute; 
 
    cursor: pointer; 
 
    background-color: #ccc 
 
} 
 

 
#map1 { z-index: 999; } 
 
#map2 { z-index: 998; } 
 
#map3 { z-index: 997; } 
 
#map4 { z-index: 996; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="maps"> 
 
    <div id="map1">Map 1</div> 
 
    <div id="map2">Map 2</div> 
 
    <div id="map3">Map 3</div> 
 
    <div id="map4"> 
 
    <button id="reset">Reset</button> 
 
    </div> 
 
</div>

Demo #2

var m1 = $("#map1").css("z-index"), 
 
\t m2 = $("#map2").css("z-index"), 
 
\t m3 = $("#map3").css("z-index"), 
 
\t m4 = $("#map4").css("z-index"); 
 

 
if (m1 > m2 || m1 > m3 || m1 > m4) { 
 
\t $("#map1").css("display", "block"); 
 
\t $("#map2 , #map3 , #map4").css("display", "none"); 
 
} else if (m2 > m1 || m2 > m3 || m2 > m4) { 
 
\t $("#map2").css("display", "block"); 
 
\t $("#map1 , #map3 , #map4").css("display", "none"); 
 
} else if (m3 > m1 || m3 > m2 || m3 > m4) { 
 
\t $("#map3").css("display", "block"); 
 
\t $("#map1 , #map2 , #map4").css("display", "none"); 
 
} else if (m4 > m1 || m4 > m2 || m4 > m3) { 
 
\t $("#map4").css("display", "block"); 
 
\t $("#map1 , #map2 , #map3").css("display", "none"); 
 
} 
 

 
$(document).ready(function() { 
 
    $("#map1").click(function(){ 
 
    $("#map1").slideUp("slow"); 
 
    $("#map2").slideDown("slow"); 
 
    }); 
 
    $("#map2").click(function(){ 
 
    $("#map2").slideUp("slow"); 
 
    $("#map3").slideDown("slow"); 
 
    }); 
 
    $("#map3").click(function(){ 
 
    $("#map3").slideUp("slow"); 
 
    $("#map4").slideDown("slow"); 
 
    }); 
 
    $("#map4").click(function(){ 
 
    $("#map4").slideUp("slow"); 
 
    $("#map1").slideDown("slow"); 
 
    }); 
 
});

#map1, #map2, #map3, #map4 
 
{ 
 
    position: absolute; 
 
    cursor: pointer; 
 
    background-color: #ccc 
 
} 
 

 
#map1 { z-index: 999; } 
 
#map2 { z-index: 998; } 
 
#map3 { z-index: 997; } 
 
#map4 { z-index: 996; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="maps"> 
 
    <div id="map1">Map 1</div> 
 
    <div id="map2">Map 2</div> 
 
    <div id="map3">Map 3</div> 
 
    <div id="map4"> 
 
    <button id="reset">Reset</button> 
 
    </div> 
 
</div>