제이쿼리 | 토글기능 toggle보다 더나은방법 | slideUp, slideDown | if문

html 구성하기

div > ul > li > a

div > ul > li  > ul > li > a

(a와 ul이 동료) siblings관계

 

jquery

$(document).ready(function(){

 

            $('div>li>a').click(function(){

                if($(this).hasClass('on')){

                    $('div>li>a').removeClass('on');

                    $('.sub').slideUp();

                }else{

                    $('.sub').slideUp();

                    $(this).siblings('.sub').slideDown();

                    $('#menu>li>a').removeClass('on');

                    $(this).addClass('on');

                }

            });

        });

div>li>a를 클릭했을때 (li 대신 a로하는이유는 클래스on을줘야하기때문) 두가지로나뉜다.

이미클릭했던거거나 이제클릭해서 하위내용을 보여져야하는거거나.

 

그래서 if문을 쓴다.

if는 이미 눌린상황이라면~ 이기때문에 클래스없애고 + 슬라이드업.

else는 안눌린상황 이기때문에 이제 눌러야하는거니까.

모든 하위내용을 닫아주고 + 내가누른 li>a의동료인 ul을 내려주고 ,

div>li>a의 클래스'on'을 없애주고 + 내가누른 li>a의 클래스를 넣어주고.