javascript - jQuery 切换菜单，在外部单击时隐藏下拉内容

Question

我使用 jQuery 创建了一个切换菜单，它工作正常，但是当单击它外部时如何隐藏下拉内容。请帮助我。谢谢我正在制作一个用于产品评论和用户提交的帖子的网站。我需要一些帮助才能成功。

    <script>
    $(".dropbtn").click(function(e){
        $(".dropdown-content").toggle();
         e.preventDefault();
    });

    $(".dropbtn").click(function(e){
        $(this).hide();
         e.preventDefault();
    });
    $(".dropbtn").click(function(e){
        $(".dropbtnhide").show();
         e.preventDefault();
    });
    $(".dropbtnhide").click(function(e){
        $(".dropdown-content").hide();
         e.preventDefault();
    });
    $(".dropbtnhide").click(function(e){
        $(this).hide();
         e.preventDefault();
    });
    $(".dropbtnhide").click(function(e){
        $(".dropbtn").show();
         e.preventDefault();
    });
    $(".dropdown-content").click(function(e){
       e.preventDefault();
    });

    </script>

.dropbtnhide{display:none; position:relative;}
.dropbtn{display:inline-block; position:relative;}

<!-- begin snippet: js hide: false console: true babel: false -->

 <div class="celldisplay dropdown">
    <button  class="dropbtnhide "><i class="far fa-ellipsis-h"></i></button>
     <button class="dropbtn"> <i class="far fa-ellipsis-v"></i></button>
      <li><a></a>
       </li>
     </div> 

Answer 1

您可以通过为 window 的 click 事件添加事件监听器来检查 Element 是否包含事件的目标 ( Element.contains(event.target)).

演示:

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

<div class="dropdown" id="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content" id="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<script>
var dropdown = document.getElementById("dropdown");
var open = false;
dropdown.onclick = function(){
if(!open){
  document.getElementById("dropdown-content").style.display = "block";
open = true;
} else {
document.getElementById("dropdown-content").style.display = "none";
open = false;
}
}
window.addEventListener("click", function(event){
 if(!dropdown.contains(event.target)){
 document.getElementById("dropdown-content").style.display = "none";
  open = false;
  console.log("Click outside of dropdown");
 }
});
</script>