Question

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

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

在此先感谢您的帮助！

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

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

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

1 个答案: