自制输入下拉框的疑问

0 0

自制输入下拉框的疑问5

大家好，我今天遇到了一个问题：先贴代码吧如下:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en-us" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="baidu-site-verification" content="">
	<meta name="google-site-verification" content="">
	<style>
	.qnum-input .qnum-list {
		display: none;
	}
	.qnum-input {
		position: relative;
	}
	.qnum-input .qnum-list, .qscore-input .qscore-list {
		width: 50px;
		position: absolute;
		top: 19px;
		left: 0px;
		z-index: 10;
	}
	#qnum-input {
		width: 30px;
		height: 16px;
	}
	ul, li {
		margin: 0px;
		padding: 0px;
	}
	</style>
	<script type="text" src="js/modernizr.js"></script>
	<!-- <link rel="shortcut icon" href="/favicon.png">
	<link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
	<!-- <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="CSS-Tricks Search"> -->
</head>
<body>
	<span class="qnum-input">
		<input type="text" id="qnum-input">
		<ul class="qnum-list">
			<li val="1">1</li>
			<li val="2">2</li>
			<li val="3">3</li>
		</ul>
	</span>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	// Version B
	$('#qnum-input').click(function() {
		if ( $(this).next('ul').is(':hidden') ) {
			$(this).next('ul').show();
		} else {
			$(this).next('ul').hide();
		}
	});

	$('.qnum-list').delegate('li', 'click', function() {
		console.log(this);
		var $this = $(this), value = $this.attr('val');
		$this
			.parent('ul')
			.siblings('#qnum-input')
			.val(value);
	});

	// 这边仍旧有疑问为什么selectmenu可以呢?
	$(document).bind('mousedown.qnum', function() {
		if ($('.qnum-list').is(':visible') ) {
			setTimeout("$('.qnum-list').hide()", 200);//加延时以便取到所选择的分值
		}
	});
	// 如果用mousedown呢点击的时候再让
	</script>
</body>
</html>

效果是这样的当用户点击输入框会有下拉框出现，用户可以选择数字或者自己输入。我的问题关于document的点击事件我写的是mousedown，本来是没有写setTimeout的，写的原因是当选择下拉框中数值的时候下拉框会缩进去而不会给输入框赋值.所以才加上延时的。
其实这个是和iteye.com的消息盒的下拉框应该是一个意思。
我想问一下。
1.当点击文档中除了下拉框的时候让下拉框收缩起来.
2.当点击相应下拉框的数值的时候会往输入框赋值并且收缩下拉框这个不写setTimeout应该怎么写?