并列元素模拟父子元素二级菜单

通常二级菜单是使用父子元素

父级分类

• 子分类1
• 子分类2
• 子分类3

首先子分类是隐藏的，当鼠标滑倒父级分类上时出现子分类，而当鼠标滑倒子分类上时，子分类不会消失，因为子分类是在父级分类的元素里面的

那么，如果父级分类和子分类是并列元素，该怎样做到从父级分类滑到子分类上子分类不消失呢？
这就需要使用定时器了！

 

$(function(){
	var fa= $('fa');
	var ch= $('ch');
	var timer = null;
	
	fa.onmouseover = show;
	fa.onmouseout = hide;
	
	ch.onmouseover = show;
	ch.onmouseout = hide;
	
	function show(){
		clearInterval( timer );  //当显示的时候先清除隐藏的定时器。作用就是移动到二级分类的时候，清除父级分类移开的隐藏二级分类的定时器。通常情况下，开一个定时器之前都要先清除这个定时器，防止多次点击生成多个定时器的BUG
		ch.style.display = 'block';
	}
	function hide(){
		timer = setTimeout(function(){
			ch.style.display = 'none';
		}, 200);  //间隔一段时间才消失，让鼠标有时间移到子元素上，触发show()
	}
});

好处就是父级和子级分离，某些子级内容很多的地方，能增强结构便于维护