編程挑戰(zhàn)
小伙伴們，根據(jù)所學(xué)知識，實(shí)現(xiàn)下圖所示的菜單效果，實(shí)現(xiàn)點(diǎn)擊菜單中的向下三角展開菜單，點(diǎn)擊頁面空白處收起菜單，按下鍵盤上的向上、向下方向鍵可以選中對應(yīng)的選項(xiàng)，鼠標(biāo)點(diǎn)擊或按下回車鍵將當(dāng)前高亮的選項(xiàng)內(nèi)容設(shè)為菜單的標(biāo)題
效果圖:
初始：
點(diǎn)擊三角：
點(diǎn)擊選中項(xiàng)：
任務(wù)
一、 點(diǎn)擊菜單中的向下三角展開菜單
提示:
1、點(diǎn)擊三角時(shí)需阻止事件冒泡
二、 展開菜單之后，在document對象上綁定keyup事件,按下向下方向鍵，選中下一個(gè)選項(xiàng)，按下向上方向鍵，選中上一個(gè)選項(xiàng)，按下回車鍵菜單收起，顯示選中項(xiàng)
提示:
1、 聲明一個(gè)全局的index變量初值為-1
2、 按下向下方向鍵時(shí)index遞增，當(dāng)遞增至大于等于菜單選項(xiàng)的總數(shù)時(shí)恢復(fù)為0
3、 按下向上方向鍵時(shí)判斷index，如若小于等于0則設(shè)為菜單選項(xiàng)的總數(shù)，之后遞減index
4、 根據(jù)index值將對應(yīng)的選項(xiàng)設(shè)為當(dāng)前（灰色背景）
5、 按下回車鍵時(shí)將對應(yīng)選中的選項(xiàng)設(shè)為菜單標(biāo)題，且將所有選項(xiàng)設(shè)為無背景，index恢復(fù)為-1，菜單收起
注意：沒有任何選項(xiàng)被選中時(shí)，按下回車鍵不做任何操作
三、鼠標(biāo)滑過每個(gè)選項(xiàng)時(shí)高亮顯示，離開時(shí)去掉背景，點(diǎn)擊高亮選項(xiàng)時(shí)菜單標(biāo)題改變
提示:
1.遍歷所有a標(biāo)簽，綁定鼠標(biāo)點(diǎn)擊的事件
注意：要考慮到瀏覽器兼容，使用innerHTML，不要使用innerText
四、點(diǎn)擊頁面空白處收起菜單
提示:
1.綁定在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;
background:url(xjt.png) no-repeat right center;}
#divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;}
#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;
// 點(diǎn)擊三角時(shí)
title.onclick=function(event){
// 執(zhí)行腳本
}
// 滑過滑過、離開、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
// 執(zhí)行腳本
// 點(diǎn)擊頁面空白處時(shí)
// 執(zhí)行腳本
}
</script>
</head>
<body>
<div id="divselect">
<cite>請選擇分類</cite>
<ul>
<li id="li"><a href="javascript:;" selectid="1">ASP開發(fā)</a></li>
<li><a href="javascript:;" selectid="2">.NET開發(fā)</a></li>
<li><a href="javascript:;" selectid="3">PHP開發(fā)</a></li>
<li><a href="javascript:;" selectid="4">Javascript開發(fā)</a></li>
<li><a href="javascript:;" selectid="5">Java特效</a></li>
</ul>
</div>
</body>
</html>
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
