제이쿼리 버튼 클릭 이벤트 - 버튼 외 화면 다른 곳을 누르면 효과

제이쿼리는 비교적 속도나 크기 등 경쟁력 면에서 뒤떨어지면서? 사양될 전망이라는 라이브러리지만..

그럼에도 작성법이 매우 간단해 현업에서 아직까지도 많이 써먹고 있다..

 

오늘은 버튼 클릭 이벤트를 정리하다가 잊었던 is() 메서드를 다시 떠올림.

정리 차 게시물을 올리게 됐다.

 

버튼 외에 화면 아무 곳이나 클릭하면 버튼에 특정 효과를 주는 이벤트를 작성한다.

 

전체를 싸고 있는 요소가 필요하다.

페이지를 감싸고 있는 요소를 .container 라고 명명. 버튼은 button 클릭하면 하단으로 메뉴 리스트가 슬라이드 되어 나타난다.

 

<div class="container">

    <button class="btn">메뉴버튼</button>

    <ul classs="slide-list">

        <li>메뉴1</li>

        <li>메뉴2</li>

        <li>메뉴3</li>

        <li>메뉴4</li>

    </ul>

</div>

 

$('.btn').click(function(){ //우선 버튼 클릭 이벤트 먼저 만들어 주고 - 버튼에 스타일 바뀌는 on 클래스 입혀주고 슬라이드 나타남.

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

    $(this).siblings().slideToggle();

})

$('.container').click(function(e){

    if( !$(e.target).is('.btn') && $('.btn').hasClass('on') ){ //버튼을 클릭한게 아니고, 버튼에 on클래스가 주어진다면 -> 버튼 슬라이드가 열려있다면 ! 전제

        $('.btn').removeClass('on');  //클래스를 지워주고 슬라이드도 닫아준다.

        $('.slide-list').slideUp();

    }

})

 

제이쿼리...넘나 간단해서 역시 포기가 어렵다..