浅谈jQuery实现二级导航（优缺点与局限性）

阅读更多

【前言】

      简单介绍下如何利用jQuery实现二级导航

      本文主要通过两种方案实现

      注意：hover = mouseenter + mouseleave

      补充：（mouseover：当鼠标指针位于元素上方时，会发生 mouseover 事件。 mouseenter:当鼠标指针穿过元素时，会发生 mouseenter 事件。

　　从这里的一个小插曲上，我们应该可以看出，mouseenter是穿过，所以只能触发一次改事件，而mouseover是位于上方，可以想下，如果给div设定了一个mouseover事件，其子孙后代都可以响应改事件，so...一旦鼠标从父级进入自己也会触发这个效果，当从子集回到父级也会触发这种效果。所以，你可以这么理解：mouseenter事件只作用于目标元素，而mouseover作用于目标元素及其后代元素。）

 

【主体】

（1）利用jQuery的hover()方法

    优点：可以实现过渡效果，并结合css3的动画，达到绚丽的效果

    缺点：jQuery兼容局限性

	
	
	
	


	

	

		首页
	
	

		简介
		

			
创建时间
			
上市时间
			
风投时间
		
	
	

		应聘
		

			
技术岗
			
管理岗
			
人资岗
		
	
	

		产品
		

			
产品名称
			
产品来源
			
产品功效
			
市场效益
		
	
	
关于我们

 

（2）jQuery的鼠标移入移出事件，mouseenter和mouseleave事件，这里之所以不用mouseover和mouseout是因为该事件会产生冒泡，出现二级导航闪动的BUG

$(function(){
		$(".nav").children('li').mouseenter(function(event) {
			/* Act on the event */
			$(this).children('ul').stop().addClass('animated rollIn').slideDown(400);
		});
		$(".nav").children('li').mouseleave(function(event) {
			/* Act on the event */
			$(this).children('ul').stop().addClass('rollOut').slideUp(400,function(){
				$(this).removeClass('animated rollIn rollOut')
			});
		});
	})

 

 

.