jquery自定义图标的手风琴菜单

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

 7596  104  查看评论 (3)
分享到微信朋友圈
X
jquery自定义图标的手风琴菜单 ie兼容6

更新时间:2019-09-26 22:02:39

使用方法

引入jquery与index.js

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./public/index.js"></script>

构造函数

参数定义

- node:节点
- icon1:标题图标,将图标类放在数组中,["icon-biaoti","icon-biaoti","icon-biaoti"]
- icon2:菜单关闭图标,["icon-jiantouarrow487","icon-jiantouarrow487","icon-jiantouarrow487"]
- icon3:菜单开启图标,["icon-jiantouarrow483","icon-jiantouarrow483","icon-jiantouarrow483"]
- new MenuIcon(node,icon1,icon2,icon3);

dom结构

<ul class="menu">
    <li>
        <div class="item">
            <i class="iconfont"></i>
            <span class="title">Title 1</span>
            <i class="iconfont"></i>
        </div>
        <div class="item-content">
            <h3><a href="#">Writing content 1</a></h3>
            <h3><a href="#">Writing content 1_1</a></h3>
            <h3><a href="#">Writing content 1_2</a></h3>
            <h3><a href="#">Writing content 1_3</a></h3>
        </div>
    </li>
    ...
</ul>
相关插件-手风琴菜单

jQuery手风琴图片轮播切换

jQuery手风琴图片轮播切换
  手风琴菜单
 35442  353

jQuery扁平化风格手风琴菜单

这是一款基于jQuery的扁平化风格的手风琴菜单,菜单是垂直的,点击菜单项即可垂直展开,显示对应菜单项的相关描述。另外,这款jQuery垂直手风琴菜单的菜单项还有一个漂亮的小图标,是一款比较实用的jQuery菜单插件。
  手风琴菜单
 27050  279

jQuery手风琴带玻璃流光质感特效全屏导航

jQuery手风琴带玻璃流光质感特效全屏导航
  手风琴菜单
 34726  501

JQ手风琴菜单

一款兼容ie6的手风琴菜单
  手风琴菜单
 35818  242

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

    隔壁王老斯 0
    2020/6/28 10:33:58
    设计不合理,点击二级菜单会合并
        隔壁王老斯0
        2020/6/28 10:39:40
        _this.nodeClick(this.parentNode)
        隔壁王老斯0
        2020/6/28 10:40:05
        $('.item').click(function() {
            _this.nodeClick(this.parentNode)
        });
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复