메뉴 jquery 질문 채택완료

안녕하세요.

아래의 코드를 한번 참고해 보시겠어요?

html

<div class="menuList">
    <ul class="list">
        <li>
            <a class="dropdown-toggle">1차<i></i></a>
            <ul class="sMenu">
                <li><a href="">2차</a></li>
                <li><a href="">2차</a></li>
                <li><a href="">2차</a></li>
            </ul>
        </li>
    </ul>
</div>
 

css

#menuArea .menuList>.list>li .sMenu {
    display: none;
}
 

jquery

$(document).ready(function() {
    // 페이지 로드 시 2차 메뉴를 숨깁니다.
    $("#menuArea .menuList>.list>li .sMenu").hide();
});

$("body").on("click ", "#menuArea .menuList>.list>li", function(){
    var idx = $("#menuArea .menuList>.list>li").index($(this));
    $("#menuArea .menuList>.list>li").each(function(index){
        if(idx == index){
            if(!$(this).hasClass("active")){
                $(this).addClass("active");
                $(this).find(".sMenu").slideDown(300);
            }else{
                $(this).removeClass("active");
                $(this).find(".sMenu").slideUp(300);
            }
        }else{
            $(this).removeClass("active");
            $(this).find(".sMenu").slideUp(300);
        }
    });
});