📌 KEY POINT
💚 메인메뉴 click 시, 하위메뉴가 펼쳐지고 다시 클릭하면 닫히는 구조
💚 클릭한 메뉴의 하위메뉴만 펼치는 구조 (클릭한 메뉴의 형제 요소는 닫혀있어야 함)
💚 .slideUp(), .slideDown(), .siblings() 등의 jQuery 메서드를 활용
👉🏻 마크업은 이렇게! (HTML5)
🩵 메인메뉴(1depth)와 하위메뉴(2depth) 마크업은 이렇게!
<body>
<ul class="list">
<li class="item">
<a href="" class="title">대메뉴1</a>
<ul class="sub">
<li><a href="">sub1</a></li>
<li><a href="">sub1</a></li>
<li><a href="">sub1</a></li>
<li><a href="">sub1</a></li>
</ul>
</li>
<li class="item">
<a href="" class="title">대메뉴2</a>
<ul class="sub">
<li><a href="">sub2</a></li>
<li><a href="">sub2</a></li>
<li><a href="">sub2</a></li>
<li><a href="">sub2</a></li>
</ul>
</li>
<li class="item">
<a href="" class="title">대메뉴3</a>
<ul class="sub">
<li><a href="">sub3</a></li>
<li><a href="">sub3</a></li>
<li><a href="">sub3</a></li>
<li><a href="">sub3</a></li>
</ul>
</li>
</ul>
</body>👉🏻 스타일은 이렇게! (CSS3)
🩵 하위메뉴(2depth)의 기본상태는 display:none;으로 보이지 않아야 한다.
🩵 메인메뉴(1depth)에 클래스 on이 추가될 경우, 하위메뉴(2depth)가 노출
🔹 클래스 추가 시, display:block;처럼 css로 컨트롤 할 수 있지만, 자연스러운 slideDown/Up효과를 위해 jQuery를 활용했다.
<style>
/* 상세 스타일 생략*/
.list .sub{
display: none;
}
</style>👉🏻 스크립트는 이렇게! (jQuery)
🩵 a태그로 작성된 메뉴버튼을 클릭 시, 링크이동(기본 동작)을 방지하기 위해 preventDefault() 코드 작성
🩵 .hasClass() : 클릭한 메인메뉴(1depth)에 on 클래스가 있는지 확인
🩵 ✅ 있다면, on 클래스를 제거하고 하위메뉴(2depth) 접음 -> .slideUp()
🩵 ❌ 없다면, 클릭한 메인메뉴(1depth)에 on 클래스를 추가하고 해당 하위메뉴(2depth)를 펼침 -> .slideDown()
🩵 그런데, 이때 이미 열려있는 다른 하위메뉴(2depth)는 접고 클릭한 요소의 메뉴만 펼쳐져야함
🔹 모든 메인메뉴(1depth)에서 on 클래스를 제거하고 하위메뉴(2depth) 요소를 모두 접음 -> .slideUp()
🩵 .stop() : 클릭 애니메이션이 끝나면 정지시키는 메서드
🔹 사용자가 빠르게 여러 번 클릭하면 애니메이션이 중첩되어 충돌하는 현상이 발생할 수 있음
🩵 .siblings() : 형제 요소를 선택하는 메서드
<script>
$('.title').click(function (e) {
e.preventDefault(); // 기본 동작 방지
if($(this).hasClass('on')){
// on 클래스가 있다면, 클릭한 메뉴의 하위메뉴(2depth)를 접겠다.
$(this).removeClass('on').siblings('.sub').stop().slideUp();
}else{
// 모든 메뉴의 하위메뉴(2depth)를 접겠다. (클릭한 메뉴의 하위메뉴만 펼치는 구조)
$('.title').removeClass('on').siblings('.sub').stop().slideUp();
// on 클래스가 없다면, 클릭한 메뉴의 하위메뉴(2depth)를 펼치겠다.
$(this).addClass('on').siblings('.sub').stop().slideDown();
}
});
</script>