css配合js模拟的select下拉框
css配合js模拟的select下拉框
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{margin:0; padding:0;} 8 a{text-decoration:none;} 9 .selectBox{width:300px; height:30px; position:relative; border:#09F solid 1px; margin:100px auto;} 10 .select_txt{width:100%; height:30px; font:14px/30px "Microsoft YaHei"; position:relative;} 11 .txt{padding:0 10px; font-size:14px; font-weight:normal;} 12 .sj{border-width:6px; border-color:#09F #FFFFFF #FFFFFF #FFFFFF; border-style:solid dashed dashed dashed; position:absolute; right:10px; top:12px; cursor:pointer;} 13 .select{border:#09F solid 1px; overflow:hidden; width:300px; position:absolute; left:-1px; top:30px; display:none;} 14 .select a{display:block; padding:0 10px; font:14px/2 "Microsoft YaHei";} 15 .select a:hover{background:#09F; color:#FFF;} 16 </style> 17 </head> 18 19 <body> 20 <div class="selectBox"> 21 <div class="select_txt"> 22 <h3 class="txt" id="txt">文字部分</h3> 23 <span class="sj" id="sj"></span> 24 </div> 25 <div class="select" id="select"> 26 <a href="javascript:;">首页</a> 27 <a href="javascript:;">关于我们</a> 28 <a href="javascript:;">联系我们</a> 29 <a href="javascript:;">关于我们</a> 30 <a href="javascript:;">联系我们</a> 31 <a href="javascript:;">联系我们</a> 32 <a href="javascript:;">联系我们</a> 33 <a href="javascript:;">联系我们</a> 34 </div> 35 </div> 36 <script> 37 (function(){ 38 var oTxt = document.getElementById('txt'); 39 var oSj = document.getElementById('sj'); 40 var oSelect = document.getElementById('select'); 41 var aA = oSelect.getElementsByTagName('a'); 42 43 oSj.onclick = function(ev) 44 { 45 var oEvent = ev || event; 46 oSelect.style.display = 'block'; 47 48 for(var i=0;i<aA.length;i++) 49 { 50 aA[i].onclick = function(ev) 51 { 52 var oEvent = ev || event; 53 oTxt.innerHTML = this.innerHTML; 54 } 55 56 } 57 58 oEvent.cancelBubble = true; 59 } 60 document.onclick = function(){oSelect.style.display = 'none';} 61 62 })() 63 </script> 64 </body> 65 </html>
