延时菜单显示demo

效果：

代码：

window.onload = function() {
    var timer = null;
    //获取页面 class元素的封装方法
    function getByClass(oParent, oClass) {
        var aEls = oParent.getElementsByTagName("*");

        var result = [];
        var re = new RegExp('\b'+oClass+'\b','i');
        for (var i = 0; i < aEls.length; i++) {
          if(re.test(aEls[i].className))
             result.push(aEls[i]);

        }
        //每一个符合的classname加入 result；
       console.log(result.length);
        return  result;
    }

     var aA = getByClass(document,"normal");
     var aSpan = getByClass(document,"float_layer");

     for(var i = 0; i< aA.length;i++)
     {
          aA[i].index= i;
         aA[i].onmouseover= function()
         {
           //不可以用this this指向当前按钮   应该指向按钮对应的第二级菜单
           //首先清空所有元素隐藏
             for (var i = 0; i < aSpan.length; i++) {
               aSpan[i].style.display = "none";
             }
            // console.log(this.index);
             aSpan[this.index].style.display = "block";
            clearInterval(timer);
         };
         aA[i].onmouseout= function()
         {
            var This = this;
             timer =  setTimeout(function()
            {
              //最初this指向window 因为settimeout 是 window的
                aSpan[This.index].style.display = "none";
            },1000);
         };
         aSpan[i].onmouseover = function(){
              clearInterval(timer);
         };
         aSpan[i].onmouseout= function(){
            var This = this;
             timer =  setTimeout(function()
            {
              //最初this指向window 因为settimeout 是 window的
                This.style.display = "none";
            },1000);
         };
     }


};

技巧点：

用正则封装一个获取class的方法
实现最基本的显示隐藏
开定时器，添加延时功能
this指向的问题
定时器何时清除
完善功能细节

1. 

//获取页面 class元素的封装方法
function getByClass(oParent, oClass) {
var aEls = oParent.getElementsByTagName("*");

var result = [];
var re = new RegExp('\b'+oClass+'\b','i');
for (var i = 0; i < aEls.length; i++) {
if(re.test(aEls[i].className))
result.push(aEls[i]);

}
//每一个符合的classname加入 result；
console.log(result.length);
return result;
}

2.

for(var i = 0; i< aA.length;i++)
{

//注意点i值的获取
aA[i].index= i;
aA[i].onmouseover= function()

{

//首先清空所有元素隐藏
for (var i = 0; i < aSpan.length; i++) {
aSpan[i].style.display = "none";
}

}

3.

aA[i].onmouseout= function()
{
var This = this;
timer = setTimeout(function()
{
//最初this指向window 因为settimeout 是 window的
aSpan[This.index].style.display = "none";
},1000);
};