在推送菜单上添加多个关闭菜单链接

我有一个从左边出来的推送菜单，效果很好，但我很难在推送菜单中应用多个"关闭菜单"链接。

我曾尝试将"querySelector"更改为"querySelectorAll"，但这会破坏推送菜单。

之所以选择这种类型的菜单，是因为我将使用内容切换器，而不是转到另一个网页。

提供了一个工作版本

HTML JavaScript

<div id="wrapper">
    <div id="container">
        <header>
            <button id="c-button--push-left" class="c-button close-menu"></button>
        </header>
    </div>
</div>
<div id="c-menu--push-left" class="c-menu c-menu--push-left">
    <div class="c-menu__close close-menu"></div>
    <nav>
        <ul>
            <li><a id="home" class="close-menu">Home</a></li>
            <li><a id="work" class="close-menu">Work</a></li>
        </ul>
    </nav>
</div>
<div id="c-mask" class="c-mask"></div>
<script type="text/javascript">
    var pushLeft = new Menu({
        wrapper: '#wrapper',
        type: 'push-left',
        menuOpenerClass: '.close-menu',
        maskId: '#c-mask',
    });
    var pushLeftBtn = document.querySelector('#c-button--push-left');
    pushLeftBtn.addEventListener('click', function(e) {
        e.preventDefault;
        pushLeft.open();
    });
</script>

jQuery

 (function(window) {

'use strict';
  /**
   * Extend Object helper function.
   */
  function extend(a, b) {
    for(var key in b) { 
      if(b.hasOwnProperty(key)) {
        a[key] = b[key];
      }
    }
    return a;
  }
  /**
   * Each helper function.
   */
  function each(collection, callback) {
    for (var i = 0; i < collection.length; i++) {
      var item = collection[i];
      callback(item);
    }
  }
  /**
   * Menu Constructor.
   */
  function Menu(options) {
    this.options = extend({}, this.options);
    extend(this.options, options);
    this._init();
  }
  /**
   * Menu Options.
   */
  Menu.prototype.options = {
    wrapper: '#o-wrapper',          // The content wrapper
    type: 'slide-left',             // The menu type
    menuOpenerClass: '.c-button',   // The menu opener class names (i.e. the buttons)
    maskId: '#c-mask'               // The ID of the mask
  };
  /**
   * Initialise Menu.
   */
  Menu.prototype._init = function() {
    this.body = document.body;
    this.wrapper = document.querySelector(this.options.wrapper);
    this.mask = document.querySelector(this.options.maskId);
    this.menu = document.querySelector('#c-menu--' + this.options.type);
    this.closeBtn = this.menu.querySelector('.close-menu');
    this.menuOpeners = document.querySelectorAll(this.options.menuOpenerClass);
    this._initEvents();
  };
  /**
   * Initialise Menu Events.
   */
  Menu.prototype._initEvents = function() {
    // Event for clicks on the close button inside the menu.
    this.closeBtn.addEventListener('click', function(e) {
      e.preventDefault();
      this.close();
    }.bind(this));
    // Event for clicks on the mask.
    this.mask.addEventListener('click', function(e) {
      e.preventDefault();
      this.close();
    }.bind(this));
  };
  /**
   * Open Menu.
   */
  Menu.prototype.open = function() {
    this.body.classList.add('has-active-menu');
    this.wrapper.classList.add('has-' + this.options.type);
    this.menu.classList.add('is-active');
    this.mask.classList.add('is-active');
    this.disableMenuOpeners();
  };
  /**
   * Close Menu.
   */
  Menu.prototype.close = function() {
    this.body.classList.remove('has-active-menu');
    this.wrapper.classList.remove('has-' + this.options.type);
    this.menu.classList.remove('is-active');
    this.mask.classList.remove('is-active');
    this.enableMenuOpeners();
  };
  /**
   * Disable Menu Openers.
   */
  Menu.prototype.disableMenuOpeners = function() {
    each(this.menuOpeners, function(item) {
      item.disabled = false;
    });
  };
  /**
   * Enable Menu Openers.
   */
  Menu.prototype.enableMenuOpeners = function() {
    each(this.menuOpeners, function(item) {
      item.disabled = false;
    });
  };
  /**
   * Add to global namespace.
   */
  window.Menu = Menu;
})(window);