1단계 : 디자인
2단계 : 헤더 작업
위처럼 아이템 메뉴 클릭시 폴더 형식으로 구현하려면 아래처럼 구현하면 된다.
.box__head > ul > li > a {
/*transparent : 투명*/
border:1px solid transparent;
margin-bottom:-1px;
}
.box__head > ul > li.active > a {
border:1px solid black;
border-bottom-color:#dfdfdf;
}
.box__head > ul > li:first-child > a {
border-left-color:transparent;
}3단계 : 바디 작업
- 해당 아이템 메뉴 클릭시 클릭한 메뉴 내용이 나오도록 구현하였다.
-
index(): 클릭한 형제 요소 간의 인덱스 순서를 구해 반환해준다. -
closest(): DOM 요소에서 가장 가까운 상위 요소를 찾는데 사용된다. / 주어진 셀렉터 또는 요소와 가장 가까운 상위 요소를 반환한다.
closest() 예시
let $box = $this.closest(".box");eq(): 선택한 요소의 인덱스 번호에 해당하는 요소를 찾는다. / 만약, 해당하는 요소가 없다면 null을 반환한다.
