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;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="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;272px;margin-right:100px;"><!--测试input里面数据保持和隐藏的input一致--> 191 <input type="text" id="testinput" value="点击左边选项，此内容会变" style="border:1px solid red;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>