jq-实现手风琴效果

实现功能：  

1、点击一级类别显示对应二级类别。
 2、展开一个类别的同时，关闭其他类别。
 3.一级类别展开和关闭的时候，对应的图标也要跟着改变。

  

        
苹果+
            

                
苹果1
                
苹果2
                
苹果3
            
        
        
香蕉+
            

                
香蕉1
                
香蕉2
                
香蕉3
            

        
        
栗子+
            

                
栗子1
                
栗子2
                
栗子3
                
栗子4
            

        
        
火龙果+
            

                
火龙果1
                
火龙果2
            

        
    

  * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        #first_menu>li {
            width: 100px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background-color: slateblue;
            margin: 5px 20px;
            position: relative;
        }
        
        li>span {
            display: inline-block;
            width: 20px;
            line-height: 20px;
            background-color: skyblue;
            color: #fff;
            position: absolute;
            right: 5px;
            top: 10px;
        }
        
        #first_menu>li>ul {
            display: none;
        }
        
        #first_menu>li>ul>li {
            background-color: skyblue;
        }

//这里用到了事件委派
        $('#first_menu>li').click(function() {
//显示当前点击对象的二级菜单
            $(this).children('ul').slideToggle()
//同时其他隐藏兄弟的二级菜单，并且要将图标改成+
            $(this).siblings().children('ul').slideUp().siblings('span').html('+')
//如果点击的图标是+,就要改成-，再次点击的时候是-，就要改成+
            $(this).find('span').html() == '+' ? $(this).find('span').html('-') : $(this).find('span').html('+')
        })