动态下拉菜单编写笔记

css&xhtml

js

(function(){
var subMenu=document.getElementById("nav").getElementsByTagName("ul");
for(var i=0;i<subMenu.length;i++){
subMenu[i].style.display="none";
(function(o){
var oP=o.parentNode;
oP.onmouseover=function(e){if(!contains(this,e)){o.style.display="block";animation();}}
oP.onmouseout=function(e){if(!contains(this,e)){o.style.display="none";animClear();}}
//animation
var obj=o.getElementsByTagName("li");var h=12;
function animation(){
if( h<28&h>=12){
for(var i=0;i<obj.length;i++){obj[i].style.lineHeight=h+"px";h=h+0.2;}
setTimeout(animation,10);
}
}
function animClear(){h=12;clearTimeout(setTimeout("")-1);}
})(subMenu[i]);
}
//定义检查
function contains(o1,e/*event*/){
if (!e) {var e=window.event;e.relatedTarget=e.type=="mouseover"?e.fromElement:e.toElement;}
var o2=e.relatedTarget;
return (o1.contains ? o1.contains(o2) || o1 == o2 : o1.compareDocumentPosition(o2)& 16||!o1.compareDocumentPosition(o2));
}
})();

这两天改写的导航栏下拉菜单代码 ，原先的代码有问题，一直没时间改，总于算写完了 ，编写遇到不少问题，不过也对许多问题的认识加深了不少。先暂且列个提纲，有空补上。如果有什么bug，望不吝指教。

• 冒泡事件模型
• setTimeout函数
• contain()&compareDocumentPosition()
• 作用域理解