我寫完代碼后為什么我點擊完一個就消失一個啊
<!doctype html>
<html>
<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í)行腳本
?? ? event = event || window.event;
?? ? if(event.stopProgation)
?? ? {
?? ??? ? event.stopProgation();
?? ??? ? }
?? ? else{
?? ??? ? event.cancelBubble = true;
?? ??? ? }
?? ? menu.style.display = "block";
?? ? document.keyUp = function(e)
?? ? {
?? ??? ? e = e || window.event;
?? ??? ? for(var i=0;i<as.length;i++)
?? ??? ? {
?? ??? ??? ? as[i].style.background = "none";
?? ??? ? }
?? ??? ??? ? if(e.keyCode==40)
?? ??? ??? ? {
?? ??? ??? ??? ? index++;
?? ??? ??? ??? ? if(index>=as.length)
?? ??? ??? ??? ?? {
?? ??? ??? ??? ??? ? index==0;
?? ??? ??? ??? ?? }
?? ??? ??? ??? ??? ? as[index].style.background ="#ccc";
?? ??? ??? ? }
?? ??? ??? ? if(e.keyCode==38)
?? ??? ??? ? {
?? ??? ??? ??? ? if(index<=0)
?? ??? ??? ??? ? {
?? ??? ??? ??? ??? ? index==as.length;
?? ??? ??? ??? ? }
?? ??? ??? ??? ??? ? index--;
?? ??? ??? ? }
?? ??? ??? ??? ?? as[index].style.background ="#ccc";
?? ? }
?? ??? ?if(e.keyCode==13 && index != -1)
?? ??? ?{
?? ??? ??? ?title.innerHTML=as[index].innerHTML;
?? ??? ??? ?for(var i=0;i<as.length;i++)
?? ??? ??? ?{
?? ??? ??? ??? ?as[i].style.background = "none";
?? ??? ??? ?}
?? ??? ??? ?menu.style.display = "none";
?? ??? ??? ?index = -1;
?? ??? ?}
} ?
?? ?
?? // 滑過滑過、離開、點擊每個選項時
????? // 執(zhí)行腳本
?? ?? for(var i=0;i<as.length;i++)
?? ?? {
?? ??? ? as[i].onmouseover = function(){
?? ??? ??? ? this.style.background='#ccc';
?? ??? ??? ? }
?? ??? ? as[i].onmouseout = function(){
?? ??? ??? ? this.style.display = "none";
?? ??? ??? ? }
?? ??? ? as[i].onclick = function(){
?? ??? ??? ? title.innerHTML = this.innerHTML;
?? ??? ??? ? }
?? ?? }
?? // 點擊頁面空白處時
?????? // 執(zhí)行腳本
?? ??? document.onclick = function()
?? ??? {
?? ??? ??? menu.style.display = "none";
?? ??? }
?}
?? </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>
2016-08-12
有幾個地方有明顯錯誤：1.首先停止冒泡stopPropagation你寫成了stopProgation;2.你下面這段代碼應(yīng)該是鼠標離開a標簽后背景色變回白色，你寫成了display =“none”即是消失，所以你鼠標劃過一個消失一個。
as[i].onmouseout?=?function(){ ?????????????this.style.display?=?"none"; ?????????????}