jQuery toggle menu, hide dropdown contents when outside click

Question

I've created a toggle menu using jQuery it works fine but how can hide dropdown-contents when click outside it.please help me. thanks i'm making a website for product reviews and user submitted posts. i need some help to make it successfully.

    <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

You can check if the Element contains the event's target by adding an event listener for the window's click event (Element.contains(event.target)).

Demo:

.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>