模擬select控件功能

時間 2019-12-08

標籤模擬 select 控件功能简体版

原文原文鏈接

直接上代碼css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>模擬select控件功能</title>
 9   <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
10   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
11   <style>
12     * {
13       margin: 0;
14       padding: 0;
15     }
16     .model_wrap{
17       position: relative;
18       margin: 10px;
19       width: 200px;
20       line-height: 30px;
21       font-size: 14px;
22     }
23 
24     .model_wrap>input{
25       box-sizing: border-box;
26       padding: 0 10px;
27       width: 100%;
28       height: 30px;
29       border: 1px solid #000;
30       border-radius: 5px;
31     }
32 
33     .model_wrap>i{
34       position: absolute;
35       right: 5px;
36       top: 5px;
37     }
38 
39     .model_wrap>ul{
40       display: none;
41       position: absolute;
42       right: 0;
43       top: 30px;
44       width: 100%;
45       background: #fff;
46       border: 1px solid #c7a055;
47       border-radius: 2px;
48     }
49 
50     .model_wrap>ul>li {
51       list-style: none;
52       height: 30px;
53       text-indent: 10px;
54     }
55   </style>
56 </head>
57 
58 <body>
59   <div class="model_wrap">
60     <input type="text" value="請選擇..." readonly="readonly">
61     <i class="fa fa-sort-desc fa-lg"></i>
62     <ul>
63       <li>個人名字是？</li>
64       <li>個人出生地址是？</li>
65       <li>個人生日是？</li>
66     </ul>
67   </div> 
68   <script>
69     $(".model_wrap>input").click(change)
70     $(".model_wrap>i").click(change)
71     function change(){
72       if ($(".model_wrap>ul").css('display') == 'none') {
73         $(".model_wrap>ul").show();
74       } else {
75         $(".model_wrap>ul").hide();
76       }
77     }
78     
79 
80     $(".model_wrap>ul li").click(function () {
81       $(".model_wrap>input").val($(this).text())
82       $(".model_wrap>ul").hide();
83     }).mouseover(function () {
84       $(this).css({
85         "background": "#1e90ff",
86         "color": "#fff",
87         'cursor': 'pointer'
88       })
89     }).mouseout(function () {
90       $(this).css({
91         "background": "#fff",
92         "color": "#000"
93       })
94     })
95   </script>
96 </body>
97 
98 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。