Question

我有一个从左侧出来的推送菜单，效果很好，但是我很难应用多个关闭菜单＆＃39;推送菜单中的链接。

我已尝试更改“查询选择器”＆＃39;到'querySelectorAll＆＃39;但这打破了推送菜单。

这种菜单的原因是因为我将使用内容切换器，而不是转到其他网页。

可以使用工作版here

HTML JavaScript

  var str = "hello, <b>my name is</b> jQuery.",
  html = $.parseHTML( str ), 
  // Append the parsed HTML
  $("#anyDomElement").append( html );`

的jQuery

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

Answer 1

只需使用querySelectorAll并在Menu.prototype._initEvents中使用此代码迭代closeBtn，因为它是数组，您应该将其重命名为 closeButtons 左右。

for (var i = 0; i < this.closeBtn.length; ++i) {
  this.closeBtn[i].addEventListener('click', function(e) {
    e.preventDefault();
    this.close();
  }.bind(this));    
}

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

1 个答案: