[jQuery] 펼침메뉴

jQuery 펼침메뉴 제이쿼리 인클루드

스타일

    .menu a{cursor:pointer;}
    .menu .hide{display:none;}

스크립트

    $(document).ready(function(){
        $(".menu>a").click(function(){
            var submenu = $(this).next("ul");
 
            // submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
            if( submenu.is(":visible") ){
                submenu.slideUp();
            }else{
                submenu.slideDown();
            }
        }).mouseover(function(){
            $(this).next("ul").slideDown();
        });
 
		//$(".menu:eq(0)>a").click();
        // menu class 중에 두번째 있는 menu 의 하위에 있는 a태그에 클릭 이벤트를 발생시킨다.
        $(".menu:eq(1)>a").click();
    });

html 마크업

    

        

            
            

                
메뉴1-1
                
메뉴1-2
                
메뉴1-3
                
메뉴1-4
                
메뉴1-5
                
메뉴1-6
            
        
 
        

            
            

                
메뉴2-1
                
메뉴2-2
                
메뉴2-3
                
메뉴2-4
                
메뉴2-5
                
메뉴2-6