# exercise_2017_03_03

**Repository Path**: dada.h/exercise_2017_03_03

## Basic Information

- **Project Name**: exercise_2017_03_03
- **Description**: 菜单及手风琴练习代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-03-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#exercise_2017_03_03

##功能描述

###菜单(Menu)
    纯CSS实现
    多级菜单折叠功能
    针对屏幕宽度小于800px的设备有适配优化

###手风琴(Accordion)
    不依赖其他第三方库, 只需引入accordion.js和accordion.css这两个文件 
######html结构
    <div class="accordion">
        <h3>面板标题1</h3>
        <div>面板内容1</div>
        <h3>面板标题2</h3>
        <div>面板内容2</div>
    </div>
######初始化: 
    var accordion = $$.accordion(selector, options) 
    //返回的是符合selector条件的实例集合, 
    //调用open, close, toggle接口默认操作第一个实例, 
    //destroy操作的是集合里的所有实例, 可通过get(idx)方法获取某一个
######selector为css选择器, options是配置项目, options默认配置如下:<br>
    {
        active: 0, //默认打开第几个面板
        animation: 300  //动画时长,单位ms
    }
######展开一个面板:
    accordion.open(idx)  //idx为面板索引, 从0开始
######收起一个面板:
    accordion.close(idx)  //idx为面板索引, 从0开始
######Toggle一个面板:
    accordion.toggle(idx)  //idx为面板索引, 从0开始
######获取实例集合里的某个实例
    accordion.get(idx) //idx为实例索引, 从0开始
######销毁实例, 销毁后可重新创建
    accordion.destroy() 
    
##开发环境: 
1. 系统版本: Mac OS 10.11.2
2. 浏览器: Chrome 56.0.2924.87(64-bit)
3. IDE: WebStorm 2016.1.1

##TODO 
1. 兼容性测试
2. 手风琴面板内容变化后自动刷新面板高度数据(暂时可先手动调用destroy方法, 再重新初始化)