用div，ul，input模拟select下拉框 

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

 

posted @ 2015-11-26 16:41  ifIhaveWings  阅读(6594)  评论(1)    收藏  举报