Close dropdown menu after click outside of navbar using only JavaScript?

Question

I want to make a drop-down menu which one is very simple and when after click outside of nav its automatically hide. note I already make drop-down menu but... I don't understand how to close it. here is my HTML and javascript code.

<section class="dropdownone">
  <div class="container">
    <h1>Dropdown One</h1>
    <li class="MajorDropOne">
      <a href="#">
      <button type="button" 
              class="btn btn-primary dropOnebtn">Click Dropdown</button>
      </a>
      <ul class="dropOne">
        <li>home</li>
        <li>about</li>
        <li>profile</li>
      </ul>
    </li>
  </div>
</section>

Possible duplicate of [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Lars-Olof Kreim, Jul 03 '18 at 07:58
write an event that checks if the select dropdown is out of focus, ie, it is blurred, you need to write a blur event, when that event is fired, hide the dropdown menu. — Code_Ninja, Jul 03 '18 at 08:14

Husam Ebish · Answer 1 · 2018-07-03T09:53:29.517

Using JavaScript :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    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;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Profile</a>
  </div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

the question is about clicking outside an dropdown, not about an hover state — Lars-Olof Kreim, Jul 03 '18 at 08:15
I modified the code, now it is about clicking I hope my answer will help you — Husam Ebish, Jul 03 '18 at 08:22
can you tell me how can i do it by using foreach or map or filter ? — Noyon Ahmed, Jul 03 '18 at 09:30

Close dropdown menu after click outside of navbar using only JavaScript?

1 Answers1