1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>代教材之(用DIV+CSS定义漂亮下拉框)</title>
7 <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js" charset="utf-8"></script>
8 <style type="text/css">
9 *{
10 margin: 0px;
11 padding: 0px;
12 font-size: 13px;
13 font-family: "微软雅黑","宋体";
14 }
15 ul{
16 list-style: none;
17 width: 400px;
18 margin: 0 auto;
19 }
20
21 .div1{
22 width: 100%;
23 height: 200%;
24 }
25
26 .u-d-con{
27 width: 270px !important;
28 position: relative;
29 float: left;
30 margin-right: 360px;
31 }
32 strong{
33 display: block;
34 width: 100%;
35 font-size: 16px;
36 color: #34495E;
37 text-align: left;
38 font-weight: normal;/*字体非粗*/
39 margin-top: 30px;
40 margin-bottom: 10px;
41 position: relative;
42 }
43 strong span{
44 font-size: 14px;
45 margin-left: 10px;
46 color: #88848E;
47 }
48 .must{/*必填项小桔点*/
49 background: url(http://images.cnblogs.com/cnblogs_com/gubook/541083/o_works-icons.png) no-repeat scroll -365px -911px transparent;
50 width: 7px;
51 height: 7px;
52 top:20px;/*相对父级元素*/
53 right: 15px;
54 position: absolute;
55 }
56
57 .selectBox {
58 background:#FFFFFF;
59 border: #b8c4ce 1px solid;
60 cursor:pointer;
61 display:block;
62 float: left;
63 width: 270px;
64 height: 48px;
65 }
66 .selectBox:hover{
67 border: 1px solid #4BA4DD;
68 }
69 .selectBoxHover { }
70 .selectBox .selectValue {
71 position: relative;
72 overflow: hidden;
73 display: block;
74 }
75 .selectBox .selectValue p {
76 display:block;
77 height: 36px;
78 line-height: 36px;
79 padding: 6px 30px 6px 20px;
80 white-space:nowrap; /*强制一行*/
81 overflow:hidden;/*和这个配合隐藏*/
82 color:#5d6d7e;
83 font-size: 14px;
84 }
85 .selectBox .selectValue i {
86 position: absolute;
87 top: 0;
88 right: 30px;
89 display:block;
90 height: 50px;
91 width: 20px;
92 overflow:hidden;
93 background: url(http://images.cnblogs.com/cnblogs_com/gubook/541083/o_select-down.png) no-repeat 0 0; /*箭头向下*/
94 }
95 .selectBox .selectBoxHover i {
96 background: url(http://images.cnblogs.com/cnblogs_com/gubook/541083/o_select-down.png) no-repeat 0 -50px; /*箭头向上*/
97 }
98
99 .selectBoxOptions {
100 background:#FFFFFF;
101 margin-left: -1px;
102 border: #b8c4ce 1px solid;
103 list-style:none;
104 overflow-y:auto;
105 z-index:1000;/*越大越顶层*/
106 position: absolute;
107 width:270px;
108 display:none;
109 }
110 .selectBoxOptions a {
111 font-family: "宋体","微软雅黑","Arial";
112 color: #7f7f7f;
113 display:block;
114 height:36px;
115 line-height:36px;
116 padding-left:20px;
117 background:#fff;
118 overflow:hidden;
119 white-space:nowrap;
120 font-size: 14px;
121 }
122 /*解决firefox选中边框*/
123 .selectBox a {
124 outline: none;
125 text-decoration:none;
126 }
127 .selectBox a:focus {
128 outline: none;
129 text-decoration:none;
130 }
131 a.selected{
132 background: #3498db;
133 color: #FFF;
134 }
135 .selectBoxOptions a:hover{
136 background: #eae9e9;
137 color: #222;
138 }
139 </style>
140 </head>
141 <body>
142 <div class="div1">
143 <div class="clearfix">
144 <div style="float:left;width:272px;margin-left:100px;">
145 <strong >
146 认知度
147 <span>
148 知晓.兴趣.意向.尝试.重复>习惯
149 </span>
150 </strong> <!--标题-->
151 <div class="clearfix">
152 <div class="u-d-con" style="width:272px;">
153 <div id="selectBox-kesid" class="selectBox">
154 <input type="hidden" value="" id="kesid" name="kesid" />
155 <a class="selectValue" href="javascript:;">
156 <p id="selectValueSpan-kes">
157 请选择认知度
158 </p>
159 <i></i>
160 </a>
161 <ul class="selectBoxOptions">
162 <li class="selectBoxItem">
163 <a href="javascript:;" class="selected" rel="点击左边选项，此内容会变">请选择认知度</a>
164 </li>
165 <li class="selectBoxItem">
166 <a href="javascript:;" rel="知晓" >知晓</a>
167 </li>
168 <li class="selectBoxItem">
169 <a href="javascript:;" rel="兴趣" >兴趣</a>
170 </li>
171 <li class="selectBoxItem">
172 <a href="javascript:;" rel="意向" >意向</a>
173 </li>
174 <li class="selectBoxItem">
175 <a href="javascript:;" rel="尝试" >尝试</a>
176 </li>
177 <li class="selectBoxItem">
178 <a href="javascript:;" rel="重复" >重复</a>
179 </li>
180 <li class="selectBoxItem">
181 <a href="javascript:;" rel="习惯" >习惯</a>
182 </li>
183 </ul>
184 </div>
185 <span class="must"></span><!--必填项小桔点-->
186 </div>
187 </div>
188 </div>
189
190 <div style="float:right;width:272px;margin-right:100px;"><!--测试input里面数据保持和隐藏的input一致-->
191 <input type="text" id="testinput" value="点击左边选项，此内容会变" style="border:1px solid red;width:200px;height:35px;" />
192 </div>
193
194 </div>
195 <script type="text/javascript">
196 $("#selectBox-kesid").click(function(){//当点击p 标签时
197 var $this = $(this);
198 var o = $this.find('.selectBoxOptions').css('display');/*定义变量o，获取ul的display属性*/
199 if( o == 'none' ){/*如果ul为隐藏，display:none;*/
200 $this.find(".selectBoxOptions").show();/*显示ul*/
201 $this.find('.selectValue').addClass('selectBoxHover');/*给a添加class ，用意为让小箭头向上*/
202 $this.find(".selectBoxItem a").click(function(){/* 当li里面的a被点击 时*/
203 $(this).blur();
204 var value = $(this).attr("rel");/*定义变量value 并将a的属性rel的值赋值给变量value*/
205 var txt = $(this).text(); /*定义变量txt 并将<a></a>之前的文本内容赋值给变量txt*/
206 $this.find('#kesid').val(value);/*将id为kesid的input的value变成 变量value的值*/
207 $("#testinput").val(value);/*右边input的值*/
208 $this.find('#selectValueSpan-kes').text(txt);/*将默认的p 的文本换成变量txt的值*/
209 $this.find('.selectBoxItem a').removeClass('selected');/*去除所有a的蓝底白字样式*/
210 $(this).addClass("selected");/*当前点击对象添加蓝底白字样式*/
211 $this.find('.selectBoxOptions').hide();/*隐藏ul*/
212 $this.find('.selectValue').removeClass('selectBoxHover');/*移除a的class，用意为让小箭头向下*/
213 return false;
214 });
215 }else{
216 $this.find(".selectBoxOptions").hide();/*隐藏ul*/
217 $this.find('.selectValue').removeClass('selectBoxHover');/*移除a的class，用意为让小箭头向下*/
218 }
219 /*点击任何地方关闭层*/
220 $(document).click(function(event){
221 var tar = $(event.target).attr("class");/*当点击除当前主体div的以外任意文档位置时*/
222 if( tar != $this ){
223 $this.find(".selectBoxOptions").hide();/*隐藏ul*/
224 $this.find('.selectValue').removeClass('selectBoxHover');/*移除a的class，用意为让小箭头向下*/
225 }
226 });
227 return false;
228 });
229 </script>
230 </div>
231
232 </body>
233 </html>
