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');
                }
            });

        });

代码相对精悍

阅读更多
文章标签: jquery 导航 手风琴
个人分类: 前端
上一篇jQuery实现侧边导航点击隐藏动画设计
下一篇html+css制作带三角的矩形
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭