JS - 반응형 모바일 메뉴 구현2 (3차 메뉴)

1단계 : 메뉴 마크업

• 메뉴 아이템에 자식이 있으면 [+] / [-]로 표시 -> after 사용
• 자식이 없는 메뉴는 >로 표시

2단계 : 반투명 배경중첩

3단계 : 아이템 클릭시 active토글

4단계 : 클릭시 활성화된 형제 active제거

//추가
$this.siblings(".active").removeClass("active");

5단계 : 클릭시 활성화된 형제의 후손들 active제거

//추가
$this.siblings(".active").find(".active").removeClass("active");

6단계 : 활성화된 아이템 클릭시, 해당 아이템의 후손에 active제거

 if ($this.hasClass("active")) {
 
   //추가
   $this.find(".active").removeClass("active");
   $this.removeClass("active");
    } 

7단계 : 모바일 메뉴 박스를 끄고 켜는 기능 구현

8단계 : 모바일 메뉴 박스를 끌 때, 모든 active 제거

9단계 : 기존에 만든 소스에 합치기, overflow-y-auto 적용