jQuery实现侧边导航手风琴效果

侧导航的手风琴效果是指，点击含子层导航的父导航时，使原本隐藏的子导航显示，再次点击，子层导航又恢复隐藏，同时，同一时间只有一个父导航的子导航能够显示

$("#sidenav > li").find('.sub-nav').hide();
        var ico = '<i style="float:right;font-size:12px;" class="glyphicon glyphicon-chevron-down"></i>';
        $("#sidenav > li").find('.sub-nav').prev('a').find('span').after(ico);


        $('#subnav .sub-nav:eq(0)').attr('id','current');
        $('.sub-nav').each(function(){//.sub-nav要设一个#current
            $('.sub-nav ul#current').find('span').next('i').attr('class','glyphicon glyphicon-chevron-up');
            $(this).parent().children('a').on('click',function(e){
                e.preventDefault();
                var target = $(this).parent().children('ul');
                if ($(this).parent().children('a').find('span').next('i').hasClass('glyphicon glyphicon-chevron-up')) {
                    target.slideUp();
                    $(this).parent().children('a').find('span').next('i').removeAttr('class','glyphicon glyphicon-chevron-up');
                    $(this).parent().children('a').find('span').next('i').attr('class','glyphicon glyphicon-chevron-down');
                    $('#sidenav ul').removeAttr("id");

                } else {
                    $('#sidenav ul').slideUp();
                    $('#sidenav ul').removeAttr("id");
                    $('#sidenav span').next('i').removeAttr('class','glyphicon glyphicon-chevron-up');
                    $('#sidenav span').next('i').attr('class','glyphicon glyphicon-chevron-down');
                    $('#sidenav span').prev('i').attr('class',"glyphicon glyphicon-list");
                    $(this).parent().children('a').find('span').next('i').removeAttr('class','glyphicon glyphicon-chevron-down');
                    $(this).parent().children('a').find('span').next('i').attr('class','glyphicon glyphicon-chevron-up');
                    target.slideDown();
                    $(this).parent("li").children('ul').attr('id','current');
                }
            });

        });

代码相对精悍