jQuery制作的折叠菜单

效果图:

html代码:

　　　　　　　　<ul class="menu">
                <li>一级菜单 <span></span> 
                    <ul class="sub">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
                <li>一级菜单 <span></span> 
                    <ul class="sub">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
                <li>一级菜单 <span></span>
                    <ul class="sub">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
                <li>一级菜单 <span></span>
                    <ul class="sub">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
                <li>一级菜单 <span></span>
                    <ul class="sub">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
                <li>一级菜单 <span></span>
                    <ul class="sub">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
            </ul>

css代码:

　　　　　　*{
                margin: 0;
                padding: 0;
            }

            .menu{
                width: 200px;
                list-style: none;
            }
            .menu>li{
                text-indent: 1em;
                /* height: 30px; */
                line-height: 30px;
                border: 1px solid #000000;
                border-bottom: 0px;
                position: relative;
            }
            .menuli:last-child{
                border-bottom: 1px solid #000;
            }
            .menu>li:last-child{
                border-bottom: 1px solid #000000;
            }
            .menu>li>span{
                width: 10px;
                height:10px;
                /* line-height: 30px; */
                display: inline-block;
                background: url("img/arrow.png") no-repeat center center;
                background-size: cover;
                position: absolute;
                top: 10px;
                right: 20px;
            }
            .sub{
                display: none;
            }
            .sub>li{
                color: #808080;
                border-top: 1px solid #000;
            }
            .current{
                transform: rotate(90deg);
            }

jquery代码:

　　　　　<script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8">    </script>
        <script type="text/javascript">
            $(".menu>li").click(function(){
                console.log($(this))
                $(this).children().show(1000)
                $(this).children("span").addClass("current")
                $(this).siblings().children(".sub").hide(1000)
                $(this).siblings().children("span").removeClass("current")
            })
        </script>