小伙伴們，根據(jù)所學(xué)知識(shí)，實(shí)現(xiàn)下圖所示的菜單效果，實(shí)現(xiàn)點(diǎn)擊菜單中的向下三角展開(kāi)菜單，點(diǎn)擊頁(yè)面空白處收起菜單，按下鍵盤(pán)上的向上、向下方向鍵可以選中對(duì)應(yīng)的選項(xiàng)，鼠標(biāo)點(diǎn)擊或按下回車(chē)鍵將當(dāng)前高亮的選項(xiàng)內(nèi)容設(shè)為菜單的標(biāo)題
效果圖:
初始：
點(diǎn)擊三角：
點(diǎn)擊選中項(xiàng)：
一、 點(diǎn)擊菜單中的向下三角展開(kāi)菜單
提示:
1、點(diǎn)擊三角時(shí)需阻止事件冒泡
二、 展開(kāi)菜單之后，在document對(duì)象上綁定keyup事件,按下向下方向鍵，選中下一個(gè)選項(xiàng)，按下向上方向鍵，選中上一個(gè)選項(xiàng)，按下回車(chē)鍵菜單收起，顯示選中項(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值將對(duì)應(yīng)的選項(xiàng)設(shè)為當(dāng)前（灰色背景） 5、 按下回車(chē)鍵時(shí)將對(duì)應(yīng)選中的選項(xiàng)設(shè)為菜單標(biāo)題，且將所有選項(xiàng)設(shè)為無(wú)背景，index恢復(fù)為-1，菜單收起
注意：沒(méi)有任何選項(xiàng)被選中時(shí)，按下回車(chē)鍵不做任何操作
三、鼠標(biāo)滑過(guò)每個(gè)選項(xiàng)時(shí)高亮顯示，離開(kāi)時(shí)去掉背景，點(diǎn)擊高亮選項(xiàng)時(shí)菜單標(biāo)題改變
提示: 1.遍歷所有a標(biāo)簽，綁定鼠標(biāo)點(diǎn)擊的事件
注意：要考慮到瀏覽器兼容，使用innerHTML，不要使用innerText
四、點(diǎn)擊頁(yè)面空白處收起菜單
提示: 1.綁定在document對(duì)象上
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)