jQuery手风琴三级菜单

所属分类:导航-垂直导航,手风琴菜单

 40298  288  查看评论 (34)
分享到微信朋友圈
X
jQuery手风琴三级菜单 ie兼容8

使用方法

引用font-awesome.min.css字体库样式;引用jquery-2.1.4.min.js库;

通过jq实现菜单的可伸拉;

/**
 * @param dom   点击的当前元素
 * @param drop  下一级菜单
 */
function dropSwift(dom, drop) {
    //点击当前元素,收起或者伸展下一级菜单
    dom.next().slideToggle();

    //设置旋转效果

    //1.将所有的元素都至为初始的状态		
    dom.parent().siblings().find('.fa-caret-right').removeClass('iconRotate');

    //2.点击该层,将其他显示的下滑层隐藏		
    dom.parent().siblings().find(drop).slideUp();

    var iconChevron = dom.find('.fa-caret-right');
    if (iconChevron.hasClass('iconRotate')) {
        iconChevron.removeClass('iconRotate');
    } else {
        iconChevron.addClass('iconRotate');
    }
}
相关插件-垂直导航,手风琴菜单

jQuery旅游网站导航

简单的旅游网站导航,加入了ie6对png的支持
  垂直导航
 25285  295

jquery左侧导航滑动网页定位效果

jquery左侧导航滑动网页定位效果
  垂直导航
 69739  468

jquery弹性竖导航网页菜单

此代码内容为jquery弹性竖导航网页菜单,属于站长常用代码,非常漂亮!
  垂直导航
 31008  282

手机端jQuery响应式菜单栏

手机端响应式菜单栏,请把浏览器宽度调整到640像素查看效果
  垂直导航
 44855  306

讨论这个项目(34)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    林沫沫 0
    2019/11/29 15:13:45
    谢谢分享,正在学习中 回复
    SpringChang 0
    2019/6/30 19:29:18
    亲,你好,很高兴能够在项目中引用你的插件,但是现在有个问题,当左边三级目录数量多了之后,点击展开页面没有出现滚动条,而是将下面的菜单遮掉,这该怎么解决呢?
    比如说:我有5个一级菜单,每个一级菜单有10个二级菜单,每个二级菜单有10个三级菜单,当我点击:第3个一级菜单->第5个二级菜单->第10个三级菜单,那么这时候第4个一级菜单以下都被遮住了。我适用了div或者的滚动属性都没有出现滚动界面。 回复
    SpringChang 0
    2019/6/27 3:32:37
    老铁,你的的css为啥指向csn啊?我把cdn的css down到本地,图标出不来,我们项目不让引用外部的连接。
        西瓜0
        2019/6/27 9:29:29
        你需要把font-awesome.4.6.0的整套文件下到你本地,里面包含了woff2,svg,.eot,.woff等字体文件,因为这些文件你没有或路径错误,所以图标显示不出来。
    回复
    as3170136 0
    2019/5/6 11:09:15
    谢谢分享
        ??0
        2020/11/2 14:33:08
        💖
    回复
    RANDY 0
    2019/3/20 15:12:03
    邪肆的微笑 0
    2019/3/16 14:36:31
    默认展开一个怎么搞?
        dt110909d0
        2019/5/5 14:41:18
        简单来说就是找这个元素的父级下的所有包含.fa-caret-right类名的子元素,将这些元素移出类名 iconRotate. 这个类名控制的就是展开与收缩时菜单的小三角的方向
        dt110909d1
        2019/5/5 14:42:05
        简单来说就是找这个元素的父级下的所有包含.fa-care,这个。iferts是每个元素都需要便利到的基本元素
    回复
    UpuP1996 0
    2019/3/15 11:44:51
    rocYang 0
    2019/1/30 17:40:02
    谢谢分享,正在学习中 回复
    黎半仙 0
    2019/1/18 14:52:26
    yushui 0
    2019/1/17 10:13:06
    这个很好用,感谢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复