通常二级菜单是使用父子元素
父级分类
- 子分类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() } });
好处就是父级和子级分离,某些子级内容很多的地方,能增强结构便于维护
时间: 2024-10-11 21:31:26