1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
6 <title>jq--实现自定义下拉框</title>
7 </head>
8 <style>
9 body {
10 margin: 0;
11 }
12
13 .xl_select_box {
14 display: inline-block;
15 position: relative;
16 line-height: 60px;
17 margin-right: 30px;
18 }
19
20 .xl_select {
21 width: 100%;
22 padding: 0 8px;
23 cursor: pointer;
24 border: 1px solid #dedede;
25 }
26
27 .xl_select span {
28 font-size: 16px;
29 }
30
31 .xl_select .arrowsdown {
32 position: absolute;
33 border-width: 6px;
34 border-color: #999999 transparent transparent transparent;
35 border-style: solid dashed dashed dashed;
36 top: 1.8em;
37 margin-left: 0.4em;
38 }
39
40 .xl_list {
41 margin: 0;
42 padding: 0;
43 display: none;
44 list-style: none;
45 position: absolute;
46 z-index: 2;
47 border: 1px solid #dedede;
48 border-top: none;
49 background-color: #FFFFFF;
50 }
51
52 .xl_list li {
53 line-height: 40px;
54 padding: 0 8px;
55 font-size: 14px;
56 white-space: nowrap;
57 cursor: default;
58 }
59
60 .xl_list li:hover {
61 background: #F2F5F9;
62 color: #666666;
63 }
64 </style>
65 <body>
66 <div class="xl_select_box">
67 <div class="xl_select">
68 <span>职位推荐</span><i class="arrowsdown"></i>
69 </div>
70 <ul class="xl_list ">
71 <li>高级UI设计师</li>
72 <li>高级UI设计师</li>
73 <li>中高级Java开发工程师</li>
74 <li>中高级Java开发工程师</li>
75 <li>中高级Java开发工程师</li>
76 </ul>
77 </div>
78
79 <div class="xl_select_box">
80 <div class="xl_select">
81 <span>求职状态</span><i class="arrowsdown"></i>
82 </div>
83 <ul class="xl_list ">
84 <li>离职-随时到岗</li>
85 <li>在职-暂不考虑</li>
86 <li>在职-考虑机会</li>
87 <li>在职-月内到岗</li>
88 </ul>
89 </div>
90 </body>
91 <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
92 <script type="text/javascript" charset="utf-8">
93 $(function() {
94 $(".xl_select").click(function() {
95 $(".xl_list").slideUp();
96 $(this).next(".xl_list").slideToggle();
97 });
98
99 $(".xl_list li").click(function() {
100 $(this).parent().prev(".xl_select").children("span").html($(this).html());
101 $(".xl_list").slideUp();
102 });
103
104 $(document).bind("click", function(e) {
105 var e = e || window.event; //事件对象，兼容IE
106 var target = e.target || e.srcElement; //源对象，兼容火狐和IE
107 while (target) {
108 if (target.className && target.className == "xl_select_box") { //循环判断至根节点，防止点击的是.xl_list和它的子元素
109 return;
110 }
111 target = target.parentNode;
112 }
113 $(".xl_list").slideUp(); //点击的不是.xl_list和它的子元素，隐藏下拉菜单
114 });
115 })
116 </script>
117 </html>
一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值，而不是仅仅为了赚钱。