Question

关于运用jQuery实现点击图标展示下拉选择框





Answer 1

<style type="text/css" media="screen">
*{margin:0;padding:0;}
body{font-size: 16px;color: #000;padding: 50px;}
.dowebok dl{position: relative;width: 180px;}
.dowebok dl dt{border:#ddd solid 1px;height: 28px;line-height: 28px;font-size: 14px;padding-left: 5px;overflow: hidden;}
.dowebok dl dt b{display: block;position: absolute;top: 5px;right:15px;width: 10px;height: 10px;border:#333 solid 1px;border-width: 0 0 1px 1px;transform:rotate(-45deg);}
.dowebok dl dd{position: absolute;width: 100%;left: 0px;top: 30px;border:#ddd solid 1px;border-top:0px;box-sizing: border-box;display: none;}
.dowebok dl dd span{display: block;height: 30px;line-height: 30px;text-align: center;font-size: 14px;color: #666;background: #fff;}
.dowebok dl dd span:hover{background-color: #139ff1;}
</style>

<div class="dowebok">
   <dl>
   	<dt><span>请选择</span><b></b></dt>
   	<dd>
            <span>天津</span>
            <span>杭州</span>
            <span>北京</span>
        </dd>
   </dl>
</div>

<script>
$(function(){
	$('.dowebok dl dt').click(function(){
		$(this).siblings('dd').toggle();  //下拉隐藏显示
	})
	
	$('.dowebok dl dd span').click(function(){
		var html = $(this).html();
		$('.dowebok dl dt').find('span').html(html);
		$('.dowebok dl dd').hide();
	})
        //判断点击其他地方时候下拉列表隐藏
	$("body,html").on("mousedown",function(e){
		var target=$(e.target);//该点击目标对象
		if(!(target.closest(".dowebok dl dd").length) && !(target.closest('.dowebok dl dt').length) && !(target.closest(self).length) && $(".dowebok dl dd").is(":visible")){
			$(".dowebok dl dd").css({"display":"none"});
			
		}
	})
	
});
</script>