Q:

JavaScript - Close submenu if user selects another menu item or clicks outside of menu

I'm trying to figure out how to close sub menu drop downs, if a user selects another menu or clicks outside of the menu (clicks something else on the page). I've read and tried a few different ways, but haven't gotten anywhere. I Just confused myself as to what is the best or right approach. Using regular JavaScript only - trying to learn.
HTML
  <div class="container">
<div class="inner-wrap">
    <ul id="filters">
        <li><a href="#" class="filterBtn">one</a>
            <ul class="dropM">
                <li>I belong to one</li>
            </ul>
        </li>
        <li><a href="#" class="filterBtn">two</a>
            <ul class="dropM">
                <li>I belong to two</li>
            </ul>           
        </li>
        <li><a href="#" class="filterBtn">three</a>
            <ul class="dropM">
                <li>I belong to three</li>
            </ul>
        </li>
        <li><a href="#" class="filterBtn">four</a>
            <ul class="dropM">
                <li>I belong to four</li>
            </ul>           
        </li>
    </ul>
</div>

CSS
    html {
  box-sizing: border-box;
  background:#ffc600;
  font-family:'helvetica neue';
  font-size: 20px;
  font-weight: bold;
}
body {
  margin: 0 auto;
  padding: 50px 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}
div.container {padding: 10px; background: #bada55; text-align: center;}
div.inner-wrap {margin: 0 auto; position: relative; display: inline-block;} 

ul#filters { list-style: none;}
ul#filters li {display: inline-block; position: relative;}
ul#filters li > ul.dropM {list-style: none; position: absolute; top: 30px; left: -40px; padding: 15px; border: 1px solid #ccc; background: #fff; display: block; min-width: 200px; display: none; z-index: 201;}
ul#filters li > ul.dropM.open {display: block;}
ul#filters {display: inline-block;}
ul#filters li a.filterBtn {text-decoration: none; padding: 10px 20px; background: #ccc; color: black;}

JS
    const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');

function openDropMenu(e){
    filterMenuBtn.forEach(cliks => {
      //console.log(cliks);
      if(cliks === this) {
        this.nextElementSibling.classList.toggle('open');
        //console.log('i clicked this one');
      }
    });
}

filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));

JSFiddle

A:

Update your javascript to this
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');

function openDropMenu(e) {
if (e.type == 'click'){
    e.currentTarget.nextElementSibling.classList.toggle('open');
} else {
    e.currentTarget.nextElementSibling.classList.remove('open');
}
}

filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
filterMenuBtn.forEach(cliks => cliks.addEventListener('blur', openDropMenu));

