<!doctype html> <html> <head> <meta charset="UTF-8"> <title>淘宝</title> <style type="text/css"> body{font-size:12px;padding:0;margin:0;} #main{ width:640px; margin:30px auto; position:relative;} /*.main{margin:0 auto;position:relative;}*/ .senior{display:block;position:absolute;right:0; color:#c5c5c5;padding:2px 20px 0 8px; height:35px;width:30px;} .btn{display:block;position:absolute;right:60px;top:0; /*如果父元素有相对定位或者绝对定位,则其绝对定位是相对于父元素而言*/ background-color:#f14515; width:75px;height:35px; font-size:14px;border:0; color:#fff;} .input{display:block;position:absolute;right:135px;top:0px; width:500px;height:29px; border:2px solid #f14515;} cite{font-family:"Microsoft Yahei"; position:absolute; left:3px;top:2px; display:block; width:60px; background:#ccc;width:60px; text-align:center;color:#fff; height:29px;line-height:29px; border:1px solid #c1c2c3; } ul{position:absolute; left:-37px;top:-10px; display:none;list-style:none; }
/*注意li不必设置display,之前在这里犯了错,设置成block,or none都会影响ul的操作,只对ul设置就行*/ ul li{ width:60px; border:1px solid #c1c2c3; background:#ccc;width:60px; text-align:center;color:#fff; height:29px;line-height:29px; } /*三角*/ cite a:before { content: ''; position: absolute; right: 2px; bottom: 4px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #888 transparent transparent transparent; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transform-origin: 50% 25%; -ms-transform-origin: 50% 25%; -moz-transform-origin: 50% 25%; -webkit-transform-origin: 50% 25%; -o-transform-origin: 50% 25%; } </style> </head> <body> <div id="main"> <a class="senior">高级<br/>搜索</a> <button type="submit" aria-label="搜索" class="btn">搜索</button> <input type="text" class="input"> <a></a> <p><cite>店铺</cite></p> <p> </p> <ul id="lii" class="select"> <li>宝贝</li> <li>天猫</li> <li>店铺</li> </ul> </div> <script typt="text/javascript"> window.onload=function(){ var main=document.getElementById("main"); var ul=main.getElementsByTagName('ul')[0]; var li=main.getElementsByTagName("li"); var title=main.getElementsByTagName('cite')[0]; var index=-1; //当点击宝贝时,显示下拉选项 title.onclick=function(event){ ul.style.display="block"; //防止冒泡; //若无此步骤,则会冒泡到"点击空白页面"的函数,导致次操作无效。 event=event||window.event; if(event.stopPropagation){ event.stopPropagation(); } else{ event.cancelBubble=true; } document.onkeyup=function(e){ e=e||document.event; for(var i=0;i<li.length;i++){ li[i].style.background="#ccc"; } //若是按了向下的方向键 if(e.keyCode==40){ index++; if(index>=li.length){ index=0; } li[index].style.background="#f14515"; } //若是按了向上的方向键 if(e.keyCode==38){ if(index<=0){ index=li.length; } index--; li[index].style.background="#f14515"; } //若是按了回车键 if(e.keyCode==13&&index!=-1){ title.innerHTML=li[index].innerHTML; for(var i=0;i<li.length;i++){ li[i].style.background="#ccc"; } index=-1; ul.style.display="none"; } } } // 点击页面空白处时 document.onclick=function(){ // 下拉选项收起 ul.style.display="none"; } // 鼠标滑过、离开、点击每个选项时 for(var i=0;i<li.length;i++){ li[i].onmouseover=function(){ this.style.background="#f14515"; } li[i].onmouseout=function(){ this.style.background="#ccc"; } //当鼠标点击某一选项时,将其显示在已选title中 li[i].onclick=function(){ title.innerHTML=this.innerHTML; } } } function getByClass(clsName, parent){ //定义函数getByClass()实现获取document或指定父元素下所有class为clsName的元素 var obj=parent?document.getElementById(parent):document; var elements=obj.getElementsByTagName("*"); var result=[]; for(var i=0;i<elements.length;i++){ if(elements[i].className==clsName){ result.push(elements[i]); } } return result; } </script> </body> </html>
在此段代码中,注意在适当的位置阻止事件冒泡。
此段代码有定宽元素居中,下三角。
获取class的函数,键盘事件,点击事件,