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


4632 | 1892  | 416 | 添加收藏 上一个 下一个
资源描述 : jquery收缩菜单自定义图标
jquery自定义图标的手风琴菜单
资源详情

使用方法


引入jquery与index.js


<script src="https://www.zjdaima.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>


指尖代码 资源每日更新 www.zjdaima.com