jquery链式调用 - 层级菜单示例

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

层级菜单

下面是最终的实现效果，如下：

那么下面来逐步编写，首先将静态页面先写出来，如下：

使用ul>(li>a{水果}+(ul>li{苹果}*3))*5按Tab键，就可以快速生成需要的HTML代码。

那么下面就是编写样式了。

使用jquery的链式写法，设置层级菜单的收缩

完整代码如下

    
    
    
    


        
        

            

                

                    水果
                    

                        
苹果
                        
苹果
                        
苹果
                    
                
                

                    水果
                    

                        
苹果
                        
苹果
                        
苹果
                    
                
                

                    水果
                    

                        
苹果
                        
苹果
                        
苹果
                    
                
                

                    水果
                    

                        
苹果
                        
苹果
                        
苹果
                    
                
                

                    水果
                    

                        
苹果
                        
苹果
                        
苹果
                    
                
            
        

注意：在写这个代码的过程中，发现如果a标签的href = ""，这种情况下监听click方法是无法正常触发jquery的特效的，需要设置href=“#”，才可以正常使用jquery特效。