Click out of Dropdown menu won't close it

Question

I have been trying to make the dropdown close when someone clicks outside of it, but I can't figure it out. I need it to close when someone clicks outside of either of the dropdowns. I tried window.onclick, but then it wouldn't let me open either dropdown.

Here is my HTML:

<nav>
  <ul class="menuBar">
    <li><a href="index.html">Home</a></li>
    <li><a href="#" onclick="menuClick('menuAccounts')">Accounts</a></li>
      <ul id="menuAccounts">
        <li>Savings</li>
        <li>Checking</li>
      </ul>
    <li ><a href="#" onclick="menuClick('menuLoans')">Loans</a></li>
      <ul id="menuLoans">
        <li>Auto</li>
        <li>Mortgage</li>
      </ul>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

Here is my CSS:

nav {
  color: #ffffff;
  background-color: #0000ff;
}
.menuBar li{
  display: inline-block;
  text-align: center;

}
.menuBar li a{
  color: #ffffff;
  text-decoration: none;
}
#menuAccounts{
  display: none;
  position: absolute;
  background-color: #0000ff;
  margin: 0 0 0 3em;
}
#menuLoans{
  display: none;
  position: absolute;
  background-color: #0000ff;
  margin: 0 0 0 6em;
}
#menuAccounts li, #menuLoans li{
  display: block;
  text-align: left;
  padding: 0 1.5em;
}

Here is my JavaScript:

function menuClick (x) {
  var dropMenu = document.getElementById(x);
  var dropAccounts = document.getElementById('menuAccounts');
  var dropLoans = document.getElementById('menuLoans');
  if(x === 'menuAccounts'){
     if(dropMenu.style.display === "none"){
       dropMenu.style.display = "block";
       dropLoans.style.display = "none";
     }else{
       dropMenu.style.display = "none";
     };
  }else if(x === 'menuLoans'){
    if(dropMenu.style.display === "none"){
       dropMenu.style.display = "block";
       dropAccounts.style.display = "none";
     }else{
       dropMenu.style.display = "none";
     };
  }else{
    dropAccounts.style.display = "none";
    dropLoans.style.display = "none";
  };
};

Answer 1

there are several ways to accomplish that. one way is to listen on onBlur of the link like this

<a href="#" onBlur="onBlur('menuLoans')" onclick="menuClick('menuLoans')">
function onBlur(x) {
//hide your popup here
}

• the other way is to add an overlay which has transparent background and listen click on it to close your popover
• the third way is to listen on click from document and if the targetElement is not one of your a then close it

Answer 2

You may add an click event handler on document. if the target element does not have the .menuBar element ancestor (refer: .closest()) you can close the menu:

document.addEventListener('click', function(e) {
    if (e.target.closest('.menuBar') == null) {
        document.querySelectorAll('.menuBar ul').forEach((ele) => ele.style.display = "none");
    }
});

function menuClick (x, e) {
            e.preventDefault();
            var dropMenu = document.getElementById(x);
            var dropAccounts = document.getElementById('menuAccounts');
var dropLoans = document.getElementById('menuLoans');
if(x === 'menuAccounts'){
    if(dropMenu.style.display !== "block"){
        dropMenu.style.display = "block";
        dropLoans.style.display = "none";
    }else{
        dropMenu.style.display = "none";
    };
}else if(x === 'menuLoans'){
    if(dropMenu.style.display !== "block"){
        dropMenu.style.display = "block";
        dropAccounts.style.display = "none";
    }else{
        dropMenu.style.display = "none";
    };
}
};

nav {
    color: #ffffff;
    background-color: #0000ff;
}
.menuBar li{
    display: inline-block;
    text-align: center;

}
.menuBar li a{
    color: #ffffff;
    text-decoration: none;
}
#menuAccounts{
    display: none;
    position: absolute;
    background-color: #0000ff;
    margin: 0 0 0 3em;
}
#menuLoans{
    display: none;
    position: absolute;
    background-color: #0000ff;
    margin: 0 0 0 6em;
}
#menuAccounts li, #menuLoans li{
    display: block;
    text-align: left;
    padding: 0 1.5em;
}

<nav>
    <ul class="menuBar">
        <li><a href="index.html">Home</a></li>
        <li><a href="#" onclick="menuClick('menuAccounts', event)">Accounts</a></li>
        <ul id="menuAccounts">
            <li>Savings</li>
            <li>Checking</li>
        </ul>
        <li ><a href="#" onclick="menuClick('menuLoans', event)">Loans</a></li>
        <ul id="menuLoans">
            <li>Auto</li>
            <li>Mortgage</li>
        </ul>
        <li><a href="about.html">About</a></li>
    </ul>
</nav>