사이트 구축·운영 인사이트, SIR 블로그
목록
다음
서

간단한 셀렉트 드롭다운 제이쿼리

서로웹
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2015-12-11 (금) 09:48:46 · 2926

html

<div class="select">

    <a href="#">Select 1</a>

    <ul>

        <li>Select 1</li>

        <li>Select 2</li>

        <li>Select 3</li>

    </ul>

</div>

 

 

css

.select {position:relative; line-height:35px;} 

.select > a {display:block; border:1px solid #ccc; padding:0 8px; overflow:hidden;}

.select > a:after,

.select > ul > li:first-child:after {display:block; float:right;}

.select > a:after {content:'▼';}

.select > ul {position:absolute; width:100%; top:1px; background:#fff; display:none;}

.select > ul > li {cursor:pointer; padding:0 8px; border:1px solid #ccc; border-top:0;}

.select > ul > li:first-child:after {content:'▲';}

 

 

Jquery

 

$("div.select > a").click(function() {

    $(this).next("ul").toggle();

    return false;

});

 

$("div.select > ul > li").click(function() {

    $(this).parent().hide().parent("div.select").children("a").text($(this).text());

    $(this).prependTo($(this).parent());

});

#개발자팁 #개발자 #팁자료실 #jquery
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
15-12-13 조회 2,517
15-12-13 조회 2,927
15-12-11 조회 2,587
15-12-11 조회 2,549
15-12-11 조회 2,552
15-12-10 조회 2,505
15-12-10 조회 2,571
15-12-10 조회 2,542
15-12-03 조회 3,182
15-12-03 조회 2,706
15-11-25 조회 2,785
15-11-09 조회 3,084
15-11-04 조회 2,943
15-06-09 조회 4,074
15-05-06 조회 5,068
15-03-28 조회 4,530
14-12-05 조회 4,976
14-10-25 조회 5,020
14-10-13 조회 4,257
14-10-03 조회 6,181
14-09-19 조회 4,949
14-09-18 조회 4,032
14-09-13 조회 4,595
14-09-03 조회 5,582
14-08-26 조회 4,192
14-08-26 조회 3,976
14-08-26 조회 3,965
14-08-11 조회 6,418
14-08-06 조회 4,110
14-08-06 조회 3,707
14-08-06 조회 3,894
14-08-01 조회 6,253
14-08-01 조회 3,827
14-07-30 조회 4,422
14-06-28 조회 5,146
14-06-28 조회 4,422
14-05-11 조회 4,571
14-05-09 조회 4,924
14-05-09 조회 7,685
14-04-30 조회 4,272
14-04-27 조회 4,176
14-04-25 조회 4,882
14-04-21 조회 3,864
14-04-21 조회 4,990
14-04-10 조회 4,587
14-04-01 조회 6,148
14-03-03 조회 3,521
14-02-25 조회 5,907
14-02-14 조회 5,186
14-02-13 조회 4,937
14-01-03 조회 4,431
13-12-06 조회 3,757
13-11-22 조회 5,510
13-11-18 조회 4,008
13-10-02 조회 4,430
13-10-02 조회 3,685
13-10-02 조회 3,945
13-10-02 조회 3,807
13-10-02 조회 4,173
13-09-16 조회 8,018
13-09-16 조회 5,381
13-08-18 조회 5,378
13-07-11 조회 4,040
13-07-10 조회 4,675
13-07-09 조회 4,719
13-07-09 조회 4,964
13-07-04 조회 4,433
13-07-04 조회 4,109
13-07-04 조회 4,219
13-07-01 조회 4,709
13-07-01 조회 4,529
13-07-01 조회 6,772
13-06-23 조회 4,361
13-06-05 조회 3,615
13-05-29 조회 4,856
13-05-10 조회 4,258
13-04-05 조회 4,873
13-04-05 조회 6,569
13-04-05 조회 1.1만
13-04-05 조회 7,160
13-04-05 조회 6,552
13-03-31 조회 5,823
13-03-31 조회 4,145
13-03-28 조회 4,511
13-03-28 조회 6,706
13-03-28 조회 9,187
13-03-28 조회 4,319
13-03-24 조회 3,935
13-03-21 조회 4,602
13-03-21 조회 1.8만
13-03-14 조회 3,920
13-03-10 조회 4,732
13-03-10 조회 4,469
13-03-10 조회 4,187
13-03-08 조회 5,249
13-03-08 조회 4,359
13-03-03 조회 5,006
13-03-03 조회 7,450
13-03-03 조회 4,210
13-03-03 조회 1.1만
글쓰기