导航效果

新建JavaScript文件，保存为nav.js，输入下面代码：

//导航效果
$(function(){
   $("#nav li").hover(function(){
	      $(this).find(".jnNav").show();
	   },function(){
	      $(this).find(".jnNav").hide();
	   });
})

在上面代码中，使用$("#nav li")选择id为nav的<li>元素，然后为它们添加hover事件。在hover事件的第1个函数内，使用$(this).find(".jnNav")找到<li>元素内部class为jnNav的元素。然后用show()方法使二级菜单显示出来。在第2个函数内，用hide()方法使二级菜单隐藏起来。显示效果如图24.11所示。

图1 导航菜单交互效果