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 })
时间： 2024-10-18 09:42:03