<!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的函數，鍵盤事件，點擊事件，
