<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例测试</title>
<link rel="stylesheet" href="css/all.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style>
/* 公共样式 */
* { padding: 0; margin: 0; 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: 0; }
.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; }
</style>
</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 模拟下拉框 -->
<script type="text/javascript">
$(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'});
        }
    )  
})
</script>
</body>
</html>

标签: none