發現一個問題就是例如css
onmouseover="openA('ren1')" 其中obj就是表明了這個ren1函數
在function openA(obj)就能夠出發這個函數若是 ' 換成了 " 就不能夠了seo
下面是下拉菜單的純js代碼附帶代碼執行順序get
var cname=0;聲明變量cname
var closetime=0;聲明變量cname
function openA(obj)當鼠標移動到標籤時候觸發openA
{
openB();當openA函數執行時候執行自定義函數openB,這個時候openB因爲closetime=0沒有做用運行下一條
if(cname)由於cname也是0因此運行下一條
{
cname.style.display="none";
}
cname=document.getElementById(obj);這個就是獲取須要顯示下拉菜單的id
cname.style.display="block"; 使其id的css重的display屬性由none變爲bock,這個時候下拉菜單顯示出來了,當鼠標 it
} 離開openA所在的div層時候觸發closeA
function closeA()
{
closetime=window.setTimeout(closet,500); 設定一個延遲是半秒關閉執行下面一個函數運算
}io
function closet()
{function
if(cname)這個時候cname是不爲0的因而讓其隱藏
{
cname.style.display="none";
}
}
變量
function openB()當鼠標移動到openA剛觸發顯示的下拉菜單時候
{
if(closetime)這個closetime變量是!=0的執行下面的函數,而它=0的意義就是若是鼠標只是主菜單通過下拉列表仍是會隱藏而不是給隱藏功能清零隻有單鼠標放到下拉列表時候纔可以讓closetime!=0;
{
window.clearTimeout(closetime);這句話是清除closetime函數的延遲關閉這個時候function closet()將不在運行下拉菜單不關閉
closetime=null; 給closetime內容清空
}原理
}
document.onclick = closeit; 這句話可寫可不寫意思就是點擊時候關閉下拉菜單cli
這就是下拉列表的運行原理