Question

当我在外部单击时，我试图隐藏dropdown menu，但到目前为止没有成功。

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

这是我拥有的dropdown menu

<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);

当我在dropdown部分之外单击时，没有一个关闭菜单。

Answer 1

我假设您已经包含了jQuery，因为某些问题示例使用了它。打开菜单时，必须将'isMenuOpen'变量设置为true。尽管这不是严格必要的，但您可以忽略它。

工作示例： https://jsfiddle.net/3ut2yqj1/

<button id="open_menu"> open menu </button>    
<div id="menu" style="border: 1px solid black; width:100px; height:100px; display:none"> </div>

 var isMenuOpen= false;

 $("#open_menu").on('click',function()
 {
   isMenuOpen = true;
   $("#menu").show();
 });

  $(document).on('click', function (e) {
    if (($(e.target).closest('#menu').length == 0) && ($(e.target).closest('#open_menu').length == 0)) {
      if (isMenuOpen == true) {
        isMenuOpen = false;
        $("#menu").hide();
      }
    }
  });

Answer 2

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

单击按钮时，您需要停止传播DOM的事件，然后将click处理程序分配给document。这是通过从按钮上的点击处理程序返回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>

Answer 3

看起来您对元素的类名感到困惑。在提供的不同尝试中，您使用openmenu ID，dropdown-content类或dropdown类来选择元素，还使用了不同的方法来隐藏和显示下拉列表（{{1 }}，show，hidden类等）

要完全回答您的问题，您需要查看相应的CSS代码：您使用哪种样式显示和隐藏下拉菜单？另外，如何将open函数绑定到某些用户事件？

无论如何，假设您能够打开该下拉列表，而问题仅在于将其关闭时，请尝试以下操作。

1。更新HTML

更新按钮的HTML：删除boxCloser()属性并为其添加类名称

onclick

2。使用以下脚本（而不是您的脚本）

<button class="dropdown-button">Per Page</button>

3。更新CSS

我不知道您的CSS是什么，因此请确保不要通过ID引用function onClick(event) { // if clicked on .dropdown-button, find .dropdown-content near it and toggle it if (event.target.classList.contains("dropdown-button")) { var content = event.target.parentElement.getElementsByClassName("dropdown-content")[0]; if (content) content.classList.toggle("show"); } else if (!event.target.matches(".dropdown *")) { // if clicked outside of dropdown, hide all dropdowns var allDropdowns = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < allDropdowns.length; i++) allDropdowns[i].classList.remove("show"); } } document.addEventListener("click", onClick);元素，而应使用类名：

#openmenu

这对于多个下拉菜单和无需jQuery 也应适用。

如果要使用jQuery，可以简化脚本：

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

请注意，当您在打开的下拉菜单中单击时，此代码可防止隐藏下拉菜单。它还允许同时打开多个下拉菜单。您可以修改代码以实现这些方面的其他行为，但这不在此问题的范围内。

Answer 4

 $(document).on("click", function(event){

        var $trigger = $(".dropdown");

        if($trigger !== event.target && !$trigger.has(event.target).length){

            $(".dropdown-content").slideUp("fast");

        }            

    });

尝试

下拉菜单在其外部单击时不会关闭

4 个答案:

1。更新HTML

2。使用以下脚本（而不是您的脚本）

3。更新CSS