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 })