<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例测试</title>
<link rel="stylesheet" href="css/all.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<!-- End 模拟下拉框 -->
<div class="select">
<div class="input_in">
<input type="text" value="D.C" />
</div>
<div class="city hide">
<ul>
<li>New York1</li>
<li>New York2</li>
<li>New York3</li>
<li>New York4</li>
<li>New York5</li>
<li>New York6</li>
</ul>
</div>
</div>
<!-- End 模拟下拉框 -->
</body>
</html>
/* 公共样式 */
* { padding:; margin:; list-style: none; font-size: 14px; }
.hide { display: none; }
input { outline: none; }
/* 模拟下拉框 */
.select { position: relative; margin: 50px 0 0 100px; }
.select .input_in input { width: 188px; height: 20px; line-height: 20px; padding: 10px 0 10px 10px; border: 1px solid #d6d6d6; cursor: pointer; }
.select .city { position: absolute; top: 40px; left:; }
.select .city ul { width: 198px; border: 1px solid #d6d6d6; border-top: none; }
.select .city ul li { padding-left: 10px; width: 188px; height: 40px; line-height: 40px; cursor: pointer; }
$(function(){
//模拟下拉框
$('.select input').on('click',function(){
if($('.select .city').is('.hide')){
$('.select .city').removeClass('hide');
}else{
$('.select .city').addClass('hide');
}
})
$('.select ul li').on('click',function(){
$('.select input').val($(this).html());
$('.select .city').addClass('hide');
$('.select input').css('border-bottom','1px solid $d6d6d6');
})
$('.select ul li').hover(
function(){
$(this).css({'backgroundColor':'#fd9','font-size':'18px'});
},function(){
$(this).css({'backgroundColor':'#fff','font-size':'14px'});
}
)
})
