生成一个手风琴菜单

ToggleMenu.js

/**
 * 生成一个手风琴菜单
 * @param $mainDom
 * @param items
 * @constructor
 */
function ToggleMenu ($mainDom, items) {
    this.$mainDom = $mainDom;
    this.items    = items;

    this.init();
}

ToggleMenu.prototype.init = function () {
    var that = this;

    // 渲染DOM
    var $ul = that._createLevelElement(that.items, 1);
    that.$mainDom.append($ul);

    // 存储$L1&$L2
    that.$level1 = that.$mainDom.find('.level-1');
    that.$level2 = that.$mainDom.find('.level-2');

    // 初始化状态
    that.reset();

    // 绑定事件
    that._bindEvent();
};

/**
 * 设置选中
 */
ToggleMenu.prototype.select = function (id) {
    var $selected = this.$mainDom.find('[data-id="' + id + '"]');

    this.reset();

    $selected
        .addClass('current')
        .parents('.level-1').addClass('selected')
        .find('.level-2').show();
};

/**
 * 生成DOM结构
 * @param items
 * @param level
 * @returns {*|jQuery|HTMLElement}
 * @private
 */
ToggleMenu.prototype._createLevelElement = function (items, level) {
    var that = this,
        $ul  = $('<ul></ul>');

    items.forEach(function (v) {
        var $level  = $('<li data-id="' + v.id + '"></li>'),
            $levelA = $('<a href="' + (v.href || 'javascript:') + '"><i></i>' + v.name + '</a>');

        $level.addClass('level-' + level).append($levelA);

        if (v.children) {
            $level.append(that._createLevelElement(v.children, 2));
        }

        $ul.append($level);
    });

    return $ul;
};

/**
 * 恢复默认状态
 */
ToggleMenu.prototype.reset = function () {
    this.$level1.removeClass('selected');
    this.$level2.removeClass('current').hide();
};

/**
 * 绑定事件
 * @private
 */
ToggleMenu.prototype._bindEvent = function () {
    var that    = this,
        $level1 = this.$level1,
        $level2 = this.$level2;

    $level1.on('click', function (e) {
        var $children = $(this).find('.level-2');

        $level1.not($(this)).removeClass('selected');
        $(this).toggleClass('selected');

        $level2.not($children).hide('fast');
        $children.slideToggle('fast');
    });

    $level2.on('click', function (e) {
        e.stopPropagation();

        that.select(this.dataset.id);
    });
};

/**
 *
 * example

 var MENUS = [
 {
     id      : '1',
     checked : false,
     name    : '手动推荐',
     children: [
         {
             id     : '1-1',
             checked: false,
             name   : '创建手动推荐'
         },
         {
             id     : '1-2',
             checked: false,
             name   : '手动推荐列表'
         }
     ]
 },
 {
     id      : '2',
     checked : false,
     name    : '手动推荐',
     children: [
         {
             id     : '2-1',
             checked: false,
             name   : '创建手动推荐'
         },
         {
             id     : '2-2',
             checked: false,
             name   : '手动推荐列表'
         }
     ]
 }
 ];

 var MENUS_SELECTED_IDS = {
        level1Id: '1',
        level2ID: '1-2'
    };


 var toggleMenu = new ToggleMenu($('.leftMenu'), MENUS);

 toggleMenu.select('1-2');
 */