이 기사에서는 jQuery를 사용하여 사용자 정의 드롭다운 목록을 구현하는 방법과 코드 공유를 주로 소개합니다. 효과도 매우 좋고 호환성도 좋습니다.
html 코드:
<p class="dropdownContainer"> <p class="dropdownDefault">1</p> <span class="downArrow arrow"></span> <ul class="dropdrown-menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">6</a></li> <li><a href="#">8</a></li> </ul> </p>
css 코드:
.dropdownContainer{position: relative;height: 30px;width: 100%;background: #555;} .dropdownDefault{border:1px solid #ddd;line-height: 28px;text-indent: 0.5em;} .dropdownContainer .downArrow{position: absolute;right: 5px;top: 9px} .dropdrown-menu{position: absolute;top:100%;width: 100%;left: 0;background: #555;display: none;} .dropdrown-menu li{line-height: 24px;} .dropdrown-menu li a{display: inline-block;width: 100%;text-indent: 0.5em} .dropdrown-menu li a:hover{background: #0078b6;font-size: 1.1em;} .arrow{width: 0;height: 0;display: inline-block;cursor: pointer;} .downArrow{border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #fff;}
js(jquery) 코드:
$(".dropdownDefault,.dropdownContainer .downArrow").click(function(){ $(this).siblings(".dropdrown-menu").show(); }); $(".dropdrown-menu li a").click(function(){ $(this).parent().parent().siblings(".dropdownDefault").html($(this).html()); $(this).parent().parent().hide(); });
코드가 매우 간단하지만 효과는 엄청 멋지지 않나요?
위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 jQuery 비디오 튜토리얼을 방문하세요.