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

Question

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

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

我不知道如何在单击外部时关闭下拉菜单，所以我尝试将两者都放在 header 和 body 上。但是我的结果在 if statement.

中有些混乱

我需要使用 parentNode 元素将下拉列表中的每个元素 select 变为 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');
    }
}

Answer 1

我想这就是你需要的：

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

Answer 2

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

这里有 browser support, and here i found a 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();
}

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

Dropdown menu closing problem - Javascript / Css / Html

javascript

events

click

drop-down-menu