下拉菜单关闭问题 - Javascript / Css / Html答案

【问题标题】：Dropdown menu closing problem - Javascript / Css / Html下拉菜单关闭问题 - Javascript / Css / Html
【发布时间】：2019-08-04 08:16:39
【问题描述】：

如果我在不同的元素上设置相同的event handler 和functionality 会有问题吗？

我正在尝试显示dropdown menu，当我点击它外部时它应该关闭，哪种方法更好？因为即使我在下拉菜单中选择项目，它仍然会关闭。

当我点击外部时，我不知道如何关闭下拉菜单，所以我尝试将header 和body 都放在上面。但我的结果在if statement 中有些混乱。

我需要使用parentNode 元素为下拉列表中的每个元素选择be strict equal。

例如：

<div class="dropdown-menu">
 <ul>
  <li>Some link</li>
  <li>Some link</li>
  <li>Some link</li>
  <li>Some link</li>
 </ul>

  <ul>
   <li>Some link</li>
   <li>Some link</li>
   <li>Some link</li>
   <li>Some link</li>
  </ul>
</div>

当我点击link 或ul 时，它会关闭。我只想要在dropdown menu之外点击

// Show dropdown more menu
 document.body.addEventListener('click', showMoreMenu);
 ui.header.addEventListener('click', showMoreMenu);

// Show dropdown more menu
function showMoreMenu(e) {
    ui.showMoreMenu(e);

    e.stopPropagation();
}

// Class method
showMoreMenu(e) {
    if(e.target === this.more_btn || e.target.parentElement === this.more_btn || e.target.parentNode === this.more_dropdown_menu || e.target === this.more_dropdown_menu || e.target.parentNode.parentElement === this.more_dropdown_menu) {
            this.more_dropdown_menu.classList.add('visible');
    } else {
        this.more_dropdown_menu.classList.remove('visible');
    }
}

【问题讨论】：

你在使用 jQuery 吗？因为使用 jQuery，它比纯 Javascript 更简单
不，我想使用纯 JS。有什么想法吗？？

标签： javascript events drop-down-menu click

【解决方案1】：

我认为这是你需要的：

document.querySelector("body:not(.dropdown-menu)").addEventListener("click", showMoreMenu);

【讨论】：

嗯，让我测试一下，我会提供反馈:)

【解决方案2】：

我发现了我只需要添加.closest(selector) 方法的问题。

这里有browser support，我在这里找到了similar answer。

hideMenu(e) {
 if(!e.target.closest('.more-dropdown-menu')) {
  this.dropdown_menu.classList.remove('visible')
 }
}

window.addEventListener('click', eventOperations);

function eventOperations(e) {
 ui.hideMenu(e);

 e.stopPropagation();
}

【讨论】：