編程挑戰(zhàn)
小伙伴們,根據(jù)所學知識,實現(xiàn)下圖所示的菜單效果,實現(xiàn)點擊菜單中的向下三角展開菜單,點擊頁面空白處收起菜單,按下鍵盤上的向上、向下方向鍵可以選中對應的選項,鼠標點擊或按下回車鍵將當前高亮的選項內容設為菜單的標題
效果圖:
初始:

點擊三角:

點擊選中項:

任務
一、 點擊菜單中的向下三角展開菜單
提示:
1、點擊三角時需阻止事件冒泡
二、 展開菜單之后,在document對象上綁定keyup事件,按下向下方向鍵,選中下一個選項,按下向上方向鍵,選中上一個選項,按下回車鍵菜單收起,顯示選中項
提示:
1、 聲明一個全局的index變量初值為-1
2、 按下向下方向鍵時index遞增,當遞增至大于等于菜單選項的總數(shù)時恢復為0
3、 按下向上方向鍵時判斷index,如若小于等于0則設為菜單選項的總數(shù),之后遞減index
4、 根據(jù)index值將對應的選項設為當前(灰色背景)
5、 按下回車鍵時將對應選中的選項設為菜單標題,且將所有選項設為無背景,index恢復為-1,菜單收起
注意:沒有任何選項被選中時,按下回車鍵不做任何操作
三、鼠標滑過每個選項時高亮顯示,離開時去掉背景,點擊高亮選項時菜單標題改變
提示:
1.遍歷所有a標簽,綁定鼠標點擊的事件
注意:要考慮到瀏覽器兼容,使用innerHTML,不要使用innerText
四、點擊頁面空白處收起菜單
提示:
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;
// 點擊三角時
title.onclick=function(event){
// 執(zhí)行腳本
}
// 滑過滑過、離開、點擊每個選項時
// 執(zhí)行腳本
// 點擊頁面空白處時
// 執(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>
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求