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

来源：互联网发布：淘宝自制女装销量好高编辑：程序博客网时间：2024/05/21 11:10

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

$("#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');                }            });        });

代码相对精悍

0 0