實現下圖所示的菜單效果，實現點擊菜單中的向下三角展開菜單，點擊頁面空白處收起菜單，按下鍵盤上的向上、向下方向鍵可以選中對應的選項，鼠標點擊或按下回車鍵將當前高亮的選項內容設爲菜單的標題
任務
一、 點擊菜單中的向下三角展開菜單
提示:
點擊三角時需阻止事件冒泡
二、 展開菜單之後，在document對象上綁定keyup事件,按下向下方向鍵，選中下一個選項，按下向上方向鍵，選中上一個選項，按下回車鍵菜單收起，顯示選中項
提示:
1、聲明一個全局的index變量初值爲-1
2、按下向下方向鍵時index遞增，當遞增至大於等於菜單選項的總數時恢復爲0
3、按下向上方向鍵時判斷index，如若小於等於0則設爲菜單選項的總數，之後遞減index
4、根據index值將對應的選項設爲當前（灰色背景）
5、按下回車鍵時將對應選中的選項設爲菜單標題，且將所有選項設爲無背景，index恢復爲-1，菜單收起
注意：沒有任何選項被選中時，按下回車鍵不做任何操作
三、鼠標滑過每個選項時高亮顯示，離開時去掉背景，點擊高亮選項時菜單標題改變
提示:
遍歷所有a標籤，綁定鼠標點擊的事件
注意：要考慮到瀏覽器兼容，使用innerHTML，不要使用innerText
四、點擊頁面空白處收起菜單
提示: 綁定在document對象上
【代碼】
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜單</title>
<style type="text/css">
body,
ul,
li {
margin: 0;
padding: 0;
font-size: 13px;
}
ul,
li {
list-style: none;
}
#divselect {
width: 186px;
margin: 80px auto;
position: relative;
z-index: 10000;
}
#divselect cite {
width: 150px;
height: 24px;
line-height: 24px;
display: block;
color: #807a62;
cursor: pointer;
font-style: normal;
padding-left: 4px;
padding-right: 30px;
border: 1px solid #333333;
}
cite:before {
content: '';
position: absolute;
right: 7px;
bottom: 7px;
width: 0;
height: 0;
border-width: 4px;
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%;
}
.extended cite:before {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
#divselect ul {
width: 184px;
border: 1px solid #333333;
background-color: #ffffff;
position: absolute;
z-index: 20000;
margin-top: -1px;
display: none;
overflow: hidden;
}
#divselect ul li {
height: 24px;
line-height: 24px;
}
#divselect ul li a {
display: block;
height: 24px;
color: #333333;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('divselect'),
title = box.getElementsByTagName('cite')[0],
menu = box.getElementsByTagName('ul')[0],
as = box.getElementsByTagName('a'),
index = -1;
var asLen = as.length;
// 點擊三角時
title.onclick = function(event) {
// 執行腳本
menu.style.display = 'block';
event.stopPropagation();
document.onkeyup = function(event) {
event = event || window.event;
var keyCode = event.keyCode;
if (event.keyCode === 40) {
if (index < asLen - 1) {
index++;
for (var i = 0; i < asLen; i++) {
as[i].style.background = '#fff';
}
as[index].style.background = '#ccc';
} else {
index = 0;
for (var i = 0; i < asLen; i++) {
as[i].style.background = '#fff';
}
as[index].style.background = "#ccc";
}
} else if (keyCode === 38) {
if (index > 0) {
for (var i = 0; i < asLen; i++) {
as[i].style.background = '#fff';
}
index--;
as[index].style.background = "#ccc";
} else {
for (var i = 0; i < asLen; i++) {
as[i].style.background = '#fff';
}
index = asLen - 1;
as[index].style.background = "#ccc";
}
} else if (keyCode === 13) {
var aHtml = as[index].innerHTML;
if (index != -1) {
title.innerHTML = aHtml;
for (var i = 0; i < asLen; i++) {
as[i].style.background = '#fff';
}
menu.style.display = 'none';
}
}
}
}
// 滑過滑過、離開、點擊每個選項時
// 執行腳本
for (var j = 0; j < asLen; j++) {
as[j].onmouseover = function() {
for (var i = 0; i < asLen; i++) {
as[i].style.background = '#fff';
}
this.style.background = '#ccc';
}
as[j].onclick = function() {
title.innerHTML = this.innerHTML;
for (var i = 0; i < asLen; i++) {
as[i].style.background = '#fff';
}
}
}
// 點擊頁面空白處時
// 執行腳本
document.onclick = function(event) {
menu.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="divselect">
<cite>請選擇分類</cite>
<ul>
<li id="li"><a href="javascript:;" selectid="1">ASP開發</a></li>
<li><a href="javascript:;" selectid="2">.NET開發</a></li>
<li><a href="javascript:;" selectid="3">PHP開發</a></li>
<li><a href="javascript:;" selectid="4">Javascript開發</a></li>
<li><a href="javascript:;" selectid="5">Java特效(什麼鬼)</a></li>
</ul>
</div>
<script type="text/javascript">
window.onblur = function() {
document.title = '(●—●)';
};
window.onfocus = function() {
document.title = "下拉菜單";
};
</script>
</body>
</html>