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

【问题标题】：How to close dropdown menu when clicking outside the menu container?单击菜单容器外部时如何关闭下拉菜单？
【发布时间】：2019-08-08 16:43:57
【问题描述】：

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

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

提前感谢您的帮助！

（使用 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>

【问题讨论】：

标签： jquery button drop-down-menu bootstrap-4 click

【解决方案1】：

您可能需要调整使用 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)

【讨论】：