실습예제01_모바일 2단 내비게이션 구현하기

• 2단 목록을작성하여 스타벅스 모바일 메뉴 클릭시 서브메뉴 펼치기/접기

• 모바일 메뉴목록을 응용하여 '아코디언'메뉴 또는 '질문과 답변'목록 개발 가능

    $(document).ready(function(){
      //1.변수선언
      const mnu = $('.gnb > ul > li > a');
      
      //2. 클릭 이벤트 _ 메인 메뉴 클릭시 해당 서브 나오게 하기
      mnu.click(function(){

        //1. 서브메뉴 펼치기 기능 구현
        $(this).next().slideToggle();
        $(this).find('i').addClass('act'); //부모안에서 자식 요소를 찾을 때는 find() 메서드를 사용

        //2. 아코디언 메뉴_다른 메뉴 클릭시 자동으로 닫힘
        $('.sub').slideUp(); //모든 서브 메뉴 위로 접고
        $(this).next().slideDown(); //선택한 메뉴의 서브만 나오게 함
        $('i').removeClass('act'); //모든 i태그에 act서식을 제거하고
        $(this).find('i').addClass('act'); // 선택한 메뉴의 자손 i태그에 act서식을 적용함
      });
    });