效果:
代码:
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);
};