用jquery实现动态菜单的方式，与jquery弹出窗口的方式差不多，都是借助JavaScript操作css样式表来呈现。

也是分为三个步骤。

1，创建一个含有菜单的html页

  
    
    jquery动态菜单-www.  
      
      
      
      
    
    
    
  
        菜单1  
        
子菜单1
  
        
子菜单2
  
    
  
    
  
        菜单2  
        
子菜单3
  
        
子菜单4
  
    
  
    
  
    

2，创建控制菜单显示的css文件

/*让所有的li都不显示小圆点，可以使用css标签选择器*/  
li{  
    /*使list前的小圆点消失*/  
    list-style: none;  
    /*缩进效果*/  
    margin-left: 18px;  
    /*隐藏菜单*/  
    display: none;  
}  
a{  
    /*文字的显示方式*/  
    text-decoration: none;  
}

3，创建控制菜单显示的JavaScript文件

/*  
 * 点击主菜单，子菜单显示；再次点击主菜单，子菜单隐藏 
 * 需要编写代码，使得主菜单在装载时添加onclick事件，使得点击主菜单可以显示子菜单 
 * 注册页面装载时执行的方法
* edit by www.
 */  
$(document).ready(function(){  
   //var uls = $("ul");  
   //找到ul下的a节点  
   var as = $("ul > a");  
   as.click(function(){  
       //首先找到当前ul中的li，然后让li显示出来  
       //获取当前被点击的ul节点  
       var aNode = $(this);  
       //找到被点击ul节点下的所有li节点  
       var lis = aNode.nextAll("li");  
       //显示或隐藏ul的li子节点们  
       lis.toggle("slow");  
   });  
}); 

您可能感兴趣的文章: