js实现二级菜单的显示隐藏(非相邻元素/非包含关系)

导航是一个网站的开始,导航下面经常会有二级菜单和三级菜单,鼠标经过主导航,菜单就需要显示出来,鼠标移开,相应的导航也需要隐藏,这是这个导航伸缩显示的原理。实现这样的功能,七娃总结了一下,目前接触到的有3中类型:包含关系导航,相邻关系导航,以及今天要说的非相邻关系导航!

对于前两种:可以用css和js都能实现

1.包含/相邻关系导航

<ul>
<h3>案例</h3>
<li>
	<a href=""><b>Cases1</b></a>
        <a href=""><b>Cases2</b></a>
        <a href=""><b>Cases3</b></a>
</li>
</ul>

针对这样的,我们只需用css将li的元素隐藏起来,h3经过的时候显示即可,连js都不需要用,如下:

ul li{dispaly:none;}
ul h3:hover li{display:block;}

或者用js实现,如下:

$("ul h3").hover(function(){
$("ul li").show();
},function(){
$("ul li").hide();
})

2.这是我们今天要讲的,不相邻元素/盒子/div的导航怎么实现呢?

七娃最开始想的是用js控制元素的隐藏和显示,和案例1一样,但是出现了bug:就是永远不能将鼠标移动到二级导航上,鼠标一旦移出一级菜单,二级菜单就隐藏了!这跟没有办法控制;然后七娃想通过二级菜单显示之后判断鼠标当前位置,是否在二级导航里面,如果是,那就不隐藏,如果不是就隐藏;不过这明显没有实现,因为利用监听元素控制鼠标一直判断位置不太友好,最后放弃改想法;

最终实现原理:js利用显示隐藏,加上计时器,然后再判断一次鼠标是否经过二级菜单;

就是说,在鼠标经过一级菜单时,二级菜单显示,鼠标移出一级菜单时触发了一个倒计时2秒的计时器,计时器回调函数进行二次判断,判断鼠标是否移入到了二级菜单里面,如果是,就不采取任何动作,否则将二级菜单隐藏;

代码如下:

 $("一级导航元素").hover(function(){
		$("二级导航元素").show();
	},function(){
		setTimeout(function(){
		   if($('二级导航元素').mouseenter()){	 
                       $("二级导航元素").css({"display":"block"});
		   }else if($('二级导航元素').mouseleave()) {
		       $("二级导航元素").hide();}
		},2000);	
	})
$('二级导航元素').mouseleave(function(){
		$("二级导航元素").hide();
})
						

这样就实现了非相邻关系下的导航显示和隐藏!其中“一级导航元素”和“二级导航元素”分别对应菜单的class名字或者id即可

赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » js实现二级菜单的显示隐藏(非相邻元素/非包含关系)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏