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实现侧边导航手风琴效果相关推荐

android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...
vue侧边导航页面效果
左边是侧边导航的效果,右边是展示内容的小组件. 展示动图如下: 点击左边的导航,右边展示相对应的区域: 滑动右边,左边也会同步. 左侧的导航可以下拉,点击右边内容区域左边的导航不会上下移动. 引入了j ...
vue 手风琴效果_Vue实现侧边菜单栏手风琴效果实例代码
编程之家收集整理的这篇文章主要介绍了Vue实现侧边菜单栏手风琴效果实例代码,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 效果图如下所示: {{item.name}} { // 判断如 ...
jquery实现简单的手风琴效果
最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: htm ...
导航菜单：jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
使用jquery的accordion实现手风琴效果菜单树
jquery的accordion的使用非常简单,只需要给它一个固定格式的ul即可...好像是句废话... 那么如何实现呢?请看下面(小明同学别低头...) jquery-2.1.0.min.js sc ...
php定位导航系统,jQuery实现定位导航位置详解
本文主要为大家详细介绍了基于jQuery实现定位导航位置效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 当滚动条滚动到内容区域的时候,侧边导航条定位到屏幕,不再动,并且点击 ...
【机器学习实践】Jupyter Notebook安装侧边导航栏功能操作及其他常用扩展功能介绍...
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

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

jQuery实现侧边导航手风琴效果相关推荐

最新文章

热门文章