[제이쿼리] select 버튼 만들기

button을 클릭하면 밑으로 옵션들이 떨어지는 일반적인 select를 직접 만들어 해보자

 

1. html

<div class="select">
            <button>고르기</button>
            <ul>
                <li><button>모자</button></li>
                <li><button>상의</button></li>
                <li><button>신발</button></li>
            </ul>
</div>

 

2. css로 기본 모양 만들기

.select{display:inline-block; position:relative;}
.select > button{border: 1px solid #e0e0e0; padding: 4px 12px;}
.select > button:after{content:"🙂";}
//
.select ul{display:none; position:absolute; width:100%;}
.select ul button{width:100%; height:30px; border:1px solid #e0e0e0;}

 

3. js에서 버튼을 클릭했을 때 작동할 내용을 입력

$(document).ready(function(){
    $('.select > button').on('click', function(){
        $(this).next().stop().slideToggle();
        $(this).toggleClass('active');
    });

    $('.select li button').on('click', function(){
        var txt = $(this).text();
        $(this).parent().parent().slideUp();
        $(this).parent().parent().prev().removeClass('active').text(txt);
    });
});

 

원하는 결과

'고르기'라는 버튼을 클릭하면 '고르기'뒤에 넣은 🙂 그래픽이 회전하면서

옵션이 아래로 떨어지고 내가 선택한 옵션(ex:모자)이 '고르기' 위치에 표시되도록 한다.

코드 풀이

'고르기'라는 button을 클릭하면

this를 기준으로 다음 요소인 형제를 slideToggle한 후 stop한다.

this를 기준으로 active를 toggleClass한다.

 

li에 있는 button을 클릭하면

나중에 txt라는 변수를 찾아서 this에 넣을 것이라는 예고

→ 텍스트 메서드

this를 기준으로 부모의 부모를 찾아서 slideUp한다.

this를 기준으로 부모의 부모를 찾아 이전의 형제에 있는 class인 active를 제거하기 위해 removeClass하고 처음에 예고 했던 txt라는 변수를 넣어준다.

→ 클래스를 제거하지 않으면 처음에 회전했던 🙂 그래픽이 원래 자리로 돌아가지 않는다

 

 

 

4. css에 active 클래스에 대한 코드 추가

🙂 그래픽을 회전시키기 위한

.select > button:after{content:"🙂"; display:inline-block; transition:all .4s;}
.select > button.active:after{transform:rotate(180deg);}

 

* transform은 인라인, 블럭 요소에서만 제공된다.