javascript - 单击下拉菜单外部时，下拉菜单不会关闭

Question

我试图在外部点击时隐藏下拉菜单，但到目前为止没有成功。

我在这里阅读了大约 10 个或更多主题，并尝试了不同的解决方案。

这是我的下拉菜单

<div class="dropdown">
  <button onclick="myFunction()">Per Page</button>
  <div id="openmenu" class="dropdown-content">
    <a href="">15</a>
    <a href="">20</a>
  </div>
</div>

以及展示部分

function myFunction() {
    document.getElementById("openmenu").classList.toggle("show");
}

到目前为止我已经尝试过了

尝试 1:

function boxCloser(e){
  if(e.target.id != 'openmenu'){
     document.body.removeEventListener('click', boxCloser, false);
     $('.dropdown-content').hide();
  }
} 

尝试 2:

$(document).on("click touchend", function(){
    $(".dropdown-content").removeClass("open");
});

尝试 3:

$('body').not(".dropdown").off('click').on('click',function(){$(".dropdown").removeClass("show")});

然后尝试 4

function hideDiv(){
    document.getElementsByClassName('dropdown')[0].classList.remove('hidden');
}

document.addEventListener("click", hideDiv, false);

当我在下拉列表部分之外单击时，它们都不会关闭菜单。

Answer 1

由于您似乎可以选择 jQuery，因此以下代码更适合，因为它将支持多个下拉列表(它不依赖于所涉及元素的 ID)。

当您单击按钮时，您需要停止在 DOM 上传播的事件，然后为 document 分配一个 click 处理程序。这是通过从按钮上的点击处理程序返回 false 来实现的。

请参阅下面的工作演示:

$(document).on("click touchend", function(e){
  $(".dropdown-content").removeClass("show");
});

$('.dropdown-content').prev('button').on('click', function(e) {  
  $(this).siblings('.dropdown-content').toggleClass('show');
  return false;
});

.dropdown-content {
  display: none;
}

.dropdown-content.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <button>Per Page</button>
  <div id="openmenu" class="dropdown-content">
    <a href="">15</a>
    <a href="">20</a>
  </div>
</div>