单击菜单容器外部时如何关闭下拉菜单？

Question

我想知道如何在 menu/popup 外部单击时关闭下拉菜单（和弹出窗口 window）。

我还没有找到任何成功的...

在此先感谢您的帮助！

（使用 Mac、Chrome 和 Bootstrap4）

<div class="ed-opts">
  <button type="button" class="btn btn-link ed-opts-open">Change</button>
  <ul class="ed-options">
    <li><a href="#" title="">Option 1</a></li>
    <li><a href="#" title="">Option 2</a></li>
    <li><a href="#" title="">Option 3</a></li>
    <li><a href="#" title="">Option 4</a></li>
    <li><a href="#" title="">Option 5</a></li>
  </ul>
</div>

Answer 1

您可能需要调整 select 使用 jQuery 正确元素的方式，但本质上应该是这样的：

function toggleMenu(){
    if($('.btn-link').hasClass('ed-opts-open')){
       $('.btn-link').removeClass('ed-opts-open'); 
    }else{
       $('.btn-link').addClass('ed-opts-open'); 
       $('.ed-opts').focus();
    }
}

$('.btn-link').on('click',toggleMenu)
$('.ed-opts').on('blur',toggleMenu)

单击菜单容器外部时如何关闭下拉菜单？

How to close dropdown menu when clicking outside the menu container?

jquery

click

button

drop-down-menu

bootstrap-4