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

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

我尝试将“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>

家
工作

var pushLeft=新建菜单({
包装器：“#包装器”，
类型：'向左推'，
菜单打开类：'.关闭菜单'，
马斯基德：“#c-面具”，
});
var pushLeftBtn=document.querySelector（“#c-button--push left”）；
pushLeftBtn.addEventListener（'click'，函数（e）{
e、 防止违约；
向左推。打开（）；
});

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);

（功能（窗口）{
"严格使用",；
/**
*扩展对象辅助函数。
*/
功能扩展（a，b）{
对于（b中的var键）{
如果（b.hasOwnProperty（键））{
a[键]=b[键]；
}
}
返回a；
}
/**
*每个辅助函数。
*/
每个函数（集合、回调）{
对于（变量i=0；i

只需使用

queryselectoral

和

菜单中的prototype.prototype.\u initEvents

使用此代码迭代closeBtn，由于它是数组，您可能应该将其重命名为closeButtons左右

for（变量i=0；i

只需使用

queryselectoral

和

菜单中的prototype.prototype.\u initEvents

使用此代码迭代closeBtn，由于它是数组，您可能应该将其重命名为closeButtons左右

for（变量i=0；i

请您在网站上创建一个文件编辑器。我已经试过了，但是你正在加载很多东西（3个CSS文件）。同样，上面的代码看起来像原型，但是您标记了jQuery，您是否同时使用这两种代码？不管怎样。问题从这里开始

this.closeBtn=this.menu.querySelector（'.close menu'）这是期望
.close菜单
是一个
菜单
，家庭和工作都不是它。它来自于上的推送菜单教程。请您在上创建一个摆弄文件。我已经试过了，但是你正在加载很多东西（3个CSS文件）。同样，上面的代码看起来像原型，但是您标记了jQuery，您是否同时使用这两种代码？不管怎样。问题从这里开始
this.closeBtn=this.menu.querySelector（'.close menu'）
这是希望
.close菜单
是一个
菜单
，家庭和工作都不是它。它来自一个推菜单教程，任何机会都可以向我展示，我对我的javascript技能不完全有信心。谢谢！这太棒了。任何机会都可以向我展示我对我的javascript技能不完全自信。谢谢！太棒了。
for (var i = 0; i < this.closeBtn.length; ++i) {
  this.closeBtn[i].addEventListener('click', function(e) {
    e.preventDefault();
    this.close();
  }.bind(this));    
}