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

原创 2015年11月18日 19:27:07

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

$("#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实现侧边栏手风琴三级导航菜单demo

jquery实现侧边栏手风琴三级导航菜单 效果图: 引入文件,font-awesome为字体库文件: css代码: ul { list-st...

jQuery实现侧边导航点击隐藏动画设计

现在有这样一个需求,对于左侧的导航,当我点击导航的最上方时,原本显示的导航隐藏,再次点击后,隐藏的导航显示,以此反复,同时,在导航隐藏的状态下悬浮在导航的内容上时,导航也显示,当前状态下鼠标不悬浮在导...

三行jquery实现手风琴效果

手风琴特效的实现 实现手风琴特效,先讲一下大致的思路.1.用一个大的div 包裹住一个ul ,ul ,里面再接四个小的li, html代码结构大致如下,设置背景色是为了看出效果,最后一个是默认展...

使用jQuery实现 模拟手风琴效果

无标题文档 $(function (){ $("#accordion").accordion({ header:"h3",//设置它的开头内容 event:"mouseo...

基于jQuery实现的手风琴效果Accordion

在公司使用java ee开发的过程中,对于一些反反复复用到的web前端效果,本屌丝产生了很严重的想把他们封装好,形成各种各样的组件直接引用即可,从而减少无数次的复制粘贴的感觉。由于是自己第一次尝试封装...

jquery.mmenu.js实现侧边导航非常适用于手机版站-最简使用教程(一)

一、插件介绍 这个插件一般做手机站用的比较多,左侧上侧右侧下侧弹出菜单。 老杨我比较笨,每次下载下来很多demo,都让我看的晕晕的,倒是看时间长了,也能看懂,不过老杨我就是觉得麻烦。总想慢慢来,...

Jquery实现360图片导航效果

*{margin:0;padding:0;} ul{list-style: none;} img{display: block; border:0;} ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)