Jquery实例2:可收缩展开的级联菜单与局部刷新

 .html部分:

JqueryMenu.html源代码:

Html代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. < html >   
  3.     < head >   
  4.         < title > Jquery 实例2:弹出菜单</ title >   
  5.         < meta  http-equiv ="content-type"  content ="text/html; charset=UTF-8" >   
  6.         < link  href ="css/menu.css"  rel ="stylesheet"  type ="text/css"  />   
  7.         < script  type ="text/javascript"  src ="js/ jquery -1.3.2.js" > </ script >   
  8.         < script  type ="text/javascript"  src ="js/menu.js" > </ script >   
  9.     </ head >   
  10.   
  11.     < body >   
  12.         < ul >   
  13.             < a  href ="#" > 诗歌</ a >   
  14.             < li > < a  href ="#"  id ="a.html" > 乡愁(余光中)</ a > </ li >   
  15.             < li > < a  href ="#"  id ="b.html" > 赋得古原草送别(白居易)</ a > </ li >   
  16.         </ ul >   
  17.         < ul >   
  18.             < a  href ="#" > 技术</ a >   
  19.             < li > < a  href ="#" > Flex/AIR</ a > </ li >   
  20.             < li > < a  href ="#" > Silverlight</ a > </ li >                
  21.         </ ul >   
  22.         < ul >   
  23.             < a  href ="#" > 体育</ a >   
  24.             < li > < a  href ="#"  id ="a.html" > 足球(欧洲风云)</ a > </ li >   
  25.             < li > < a  href ="#"  id ="b.html" > 篮球(NBA战火)</ a > </ li >   
  26.         </ ul >   
  27.         < div  id ="content" > </ div >   
  28.     </ body >   
  29. </ html >   

 

 

2.css代码

menu.js源代码:

Js代码
  1. /*让所有li的小圆点都不显示,可以使用css的标签选择器*/   
  2. li {   
  3.     /*让li前面的小圆点消失*/   
  4.     list-style: none;   
  5.     /*让子菜单向右移动一段距离,达到缩进的效果*/   
  6.     margin-left: 15px;   
  7.     /*让所有的子菜单都不显示*/   
  8.     display: none;   
  9. }   
  10.   
  11. a {   
  12.     /*让链接的下划线消失*/   
  13.     text-decoration: none;   
  14. }  

  

 

3.JavaScript代码:

menu.js源代码:

Js代码
  1. //需要点击主菜单的按钮时,对应的子菜单可以显示,再次点击子菜单则隐藏   
  2.   
  3. //需要编写代码时,在页面加载时,让所有的主菜单添加onclick事件   
  4. //保证主菜单点击时可以显示或者隐藏子菜单   
  5.   
  6. //注册页面装载时执行的方法   
  7. $(document).ready(function () {   
  8.     //这里首先需要找到所有的主菜单   
  9.     //然后给所有的主菜单注册点击事件   
  10.        
  11.     var  as = $("ul > a" );   
  12.     as.click(function () {   
  13.         //这里需要找到当前的ul中的li,然后让li显示出来   
  14.         //获取当前被点击的ul节点   
  15.         var  ulNode = $(this );   
  16.         //找到当前a节点的所有li兄弟子结点   
  17.         var  lis = ulNode.nextAll("li" );   
  18.         //让子菜单显示或隐藏   
  19.         lis.toggle("slow" );   
  20.         //局部刷新   
  21.         $("li > a" ).click(function () {   
  22.             $("#content" ).load($(this ).attr("id" ));   
  23.         });   
  24.     });   
  25. });  

 

 

ok,代码已经贴完,现在我们看一看效果图吧。

 

你可能感兴趣的:(Jquery实例2:可收缩展开的级联菜单与局部刷新)