关闭

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

标签: jquery导航手风琴
601人阅读 评论(0) 收藏 举报
分类:

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

$("#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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:33312次
    • 积分:661
    • 等级:
    • 排名:千里之外
    • 原创:34篇
    • 转载:3篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论