토글 된 상태 제어하기

Question

이상한 질문이 있습니다.

약간 겹치는 두 개의 사각형을 만들었습니다. 사각형 하나를 클릭하면 폭이 전환됩니다. 내가 무엇을하고 싶은지는 이벤트가 트리거되었는지 감시하고, 그렇다면 두 번째 요소의 z- 인덱스를 첫 번째 요소보다 높게 변경하는 함수를 만드는 것입니다. 이것이 가능한가?

JS 바이올린 : https://jsfiddle.net/theodore_steiner/qvc7da0s/9/

<div id="square1"></div> 
<div id="square2"></div> 

CSS :

#square1 
{ 
height: 20px; 
width: 20px; 
background-color: blue; 
position: absolute; 
z-index: 3; 
transition: all .4s ease; 
} 

#square1.active 
{ 
width: 50px; 
} 


#square2 
{ 
height: 20px; 
width: 20px; 
background-color: green; 
position: absolute; 
z-index: 2; 
left: 25px; 
} 

JS;

var square1 = document.getElementById("square1"); 
var square2 = document.getElementById("square2"); 


square1.onclick = function pushLeft() 
    { 
    this.classList.toggle("active"); 
    }; 

Answer 1

general sibling selector ~을 사용하는이 CSS 규칙을 추가하십시오.

바로 형제를 원할 경우에만 adjacent sibling selectors +을 사용하십시오.

#square1.active ~ #square2 
{ 
    z-index: 5; 
} 

샘플 조각

var square1 = document.getElementById("square1"); 
 
var square2 = document.getElementById("square2"); 
 

 
square1.onclick = function pushLeft() { 
 
    this.classList.toggle("active"); 
 
};

#square1 { 
 
    height: 20px; 
 
    width: 20px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    z-index: 3; 
 
    transition: all .4s ease; 
 
} 
 
#square1.active { 
 
    width: 50px; 
 
} 
 
#square1.active ~ #square2 { 
 
    z-index: 5; 
 
} 
 
#square2 { 
 
    height: 20px; 
 
    width: 20px; 
 
    background-color: green; 
 
    position: absolute; 
 
    z-index: 2; 
 
    left: 25px; 
 
}

<div id="square1"></div> 
 
<div id="square2"></div>