JavaScript - ユーザーが別のメニュー項目を選択したとき、またはメニューの外をクリックしたときにサブメニューを閉じる

Question

ユーザーが別のメニューを選択したりメニューの外をクリックすると、サブメニューのドロップダウンを閉じる方法を解明しようとしていますページ）。私はいくつかの方法を読んで試しましたが、どこにも手を出せませんでした。私は、ベストまたは正しいアプローチが何であるかについて自分自身を混乱させました。通常のJavaScriptのみを使用 - 学習しようとしています。

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

Answer 1

はおそらく、あなたの周りにあなたのコードのタイプミスを持っていることを知っているこの

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));