• HTML
  • CSS
  • J볃교

HTML,CSS,JQUERY를 이용하여 쇼핑몰 처럼 select 박스 구현하기

2018-12-18 579

설명

  • 카카오톡 링크

HTML,CSS,JQUERY를 이용하여 쇼핑몰 처럼 select 박스 구현하는 소스 입니다~!

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<script type="text/javascript">
	$(document).ready(function() {
		$(".option_choice").on("click", function() {
			if($(this).hasClass("on")) {
				$(this).removeClass("on");
				$(".select_box").css({"display":"none"});
			} else {
				$(this).addClass("on");
				$(".select_box").css({"display":"inline-block"});
			}
		});

		$(".select_box li a").on("click", function() {
			$(".option_choice").text($(this).text()).removeClass("on");
			$(".select_box").css({"display":"none"});
		});

		$(document).mouseup(function (e) {
			//영역외 클릭시 닫치게끔
			var popup_close = $(".option_choice_box");
			if (!popup_close.is(e.target) && popup_close.has(e.target).length === 0){
				$(".option_choice").removeClass("on");
				$(".select_box").css({"display":"none"});
			}	
		});
	});
</script>
<style type="text/css">
	.test_option {position:relative; display:inline-block; width:100%;}
	.option_choice {display:inline-block; width:100%; box-sizing:border-box; padding:13px 38px 13px 13px; border:1px solid #b7bfc8;  font-size:14px; font-weight:400; letter-spacing:-0.05em; color:#909090; cursor:pointer; background:url('/img/item_select_bg.png') no-repeat right 18px center; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; }
	.option_choice.on {background:url('/img/item_select_bg_on.png') no-repeat right 18px center; border:1px solid #a6c8ff }
	.select_box {position:absolute; left:0; top:42px; width:100%; box-sizing:border-box; border:1px solid #b7bfc8; border-top:0 none; background:#fff; display:none; z-index:100}
	.select_box li {display:inline-block; width:100%; box-sizing:border-box;  font-size:13px; font-weight:400; letter-spacing:-0.05em; color:#909090; line-height:1.2em; border-top:1px solid #e9e9e9}
	.select_box li a {display:inline-block; width:100%; box-sizing:border-box; padding:13px; line-height:1.2em}
</style>
<div class="test_option">
	<span class="option_choice">테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1</span>
	<ul class="select_box">
		<li><a href="javascript:;">테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1테스트입니다1</a></li>
		<li><a href="javascript:;">테스트입니다2테스트입니다2테스트입니다2테스트입니다2</a></li>
		<li><a href="javascript:;">테스트입니다3테스트입니다3테스트입니다3테스트입니다3</a></li>
		<li><a href="javascript:;">테스트입니다4테스트입니다4테스트입니다4테스트입니다4</a></li>
	</ul>
</div>