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...

UI - 竖向折叠手风琴导航菜单[JS+div+css]

JS+div+css实现竖向折叠手风琴导航菜单插件 - 代码笔记 www.198zone.com *{margin:0;padding:0;list-style-type:none;} a,i...
  • Gykimo
  • Gykimo
  • 2013年12月31日 10:46
  • 2183

原生js实现手风琴菜单效果 与 css3的过渡实现手风琴效果

最近学了css3的变形、过渡和动画,写了一个用css3手风琴菜单的效果,又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的,现在给大家分享一下。 1、css3实现手风琴效果 ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

【精心推荐】20款优秀 jQuery Accordion(手风琴)特效插件

Accordion(手风琴)是网站中常用的效果之一,用于一组内容(图片、文本等)之间的切换显示。使用 jQuery 能够轻松实现 Accordion 效果,今天这篇文章向大家推荐网站开发中常用的2...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

【JQuery】jQuery自制简易手风琴效果(附实现原理)

简易手风琴效果,附实现原理
  • LZGS_4
  • LZGS_4
  • 2015年08月30日 09:48
  • 6976

jQuery自制手风琴效果增强版(附实现原理)

手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在http://blog.csdn.net/lzgs_4/article/details/48101...
  • alokka
  • alokka
  • 2017年06月15日 22:52
  • 523

Layui前端框架导航栏使用介绍

LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏...

layui页面元素使用(二)

前面layui页面元素使用(一)中我们已经对页面元素,按钮、表单、图标进行了简单的学习使用,接下来我们会继续学习页面元素中的“导航” “选项卡” “表格” “进度条” “面板”等等组件的使用。 目...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现侧边导航手风琴效果
举报原因:
原因补充:

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