jq-实现手风琴效果

实现功能：  

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

  <ul id="first_menu">
        <li>苹果<span>+</span>
            <ul>
                <li>苹果1</li>
                <li>苹果2</li>
                <li>苹果3</li>
            </ul>
        </li>
        <li>香蕉<span>+</span>
            <ul>
                <li>香蕉1</li>
                <li>香蕉2</li>
                <li>香蕉3</li>
            </ul>

        </li>
        <li>栗子<span>+</span>
            <ul>
                <li>栗子1</li>
                <li>栗子2</li>
                <li>栗子3</li>
                <li>栗子4</li>
            </ul>

        </li>
        <li>火龙果<span>+</span>
            <ul>
                <li>火龙果1</li>
                <li>火龙果2</li>
            </ul>

        </li>
    </ul>

  * {
            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('+')
        })