JSでハンバーガーメニュー開いた後、メニュー外をクリックで閉じたい

初心者のためご教授頂けますと嬉しいです。

前提・実現したいこと

使用言語　javascript
btnをクリックでハンバーガーメニューを開くことはできます。
同じbtnをクリックで閉じることもできます。

btn以外の要素(container要素）をクリックしてもメニューを閉じる実装がしたいです。

該当のソースコード

HTML

<!--global-container-->
<div class="global-container" id="global-container">

<!--mobile-menu-->
<nav class="mobile-menu" id="mobile-menu">
～略～
</nav><!--/mobaile-menu-->

<!--container-->
<div class="container" id="container">

<!--humberger-->
<div class="humberger">
<button class="humberger-btn" id="humberger-btn">
<span></span>
<span></span>
<span></span>
</button>
</div><!--/humberger-->

<!--main-->
<section class="main">
～以下、略～
</div><!--/container-->
</div><!--/global-container-->

Javascript

    const gCon = document.getElementById('global-container');
    const con = document.getElementById('container');
    const hBtn = document.getElementById('humberger-btn');
    const mMenu = document.getElementById('mobile-menu');
    
    hBtn.addEventListener('click', () => {
        gCon .classList.toggle('menu-open');
        con.classList.toggle('menu-open');
        mMenu.classList.toggle('menu-open');
    });
    
    con.addEventListener('click', () => {
        if(con.classList === 'menu-open') {
            gCon .classList.remove('menu-open');
            con.classList.remove('menu-open');
            mMenu.classList.remove('menu-open');
        }
    });

エラーはないですが実行もされないです。

試したこと

試したこと①
比較演算子 === を ==　にした。
→変わらず。
containerに2つのクラスがあるからできない？(container,menu-open)

試したこと②
if文を消した
→開くこともできなくなった。

試したこと③
hasClassに変更
→エラー(Uncaught TypeError: con.hasClass is not a function
at HTMLDivElement.<anonymous>)

    con.addEventListener('click', () => {
        if(con.hasClass('menu-open')) {
            gCon .classList.remove('menu-open');
            con.classList.remove('menu-open');
            mMenu.classList.remove('menu-open');
        }
    });

色々と調べてみたのですが、jQueryの情報が多く解決できませんでした。
javascriptのみで実装がしたいのでどなたかご教授ください。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

btn以外の要素をクリックしてもメニューを閉じる

この仕様を愚直に実装すると以下のようになると思います。

javascript
1document.addEventListener('click', ({ target }) => {
2  if (target instanceof Element && target.closest('#humberger-btn')) return;
3  closeMenu();
4});

カッコ書きの通り #container に限定するのであれば con.addEventListener( ... でいいのですが、
if (con.classList === 'menu-open') このif文が誤っています。
Element.prototype.classList が返す型は DOMTokenList というArrayLikeです。
これと文字列比較をしても当然一致するわけがないですよね？
DOMTokenList は contains メソッドを持っています。これを使えばいいです。

ただ、 DOMTokenList.prototype.remove は別に対象のトークンが無かったからといってエラーを出すものでもありません。
別にif文でガードする必要もないのではないかと思います（実現したい仕様によりますけど）

投稿2020/06/19 07:03