【jQuery】領域外のクリック時にメニューを閉じるようにする

jQueryでスマホ用メニューをクリックした際にメニュー以外の領域をクリックした際にメニューを閉じるようにしたい。

このサイトで✕ボタンでしかメニューが閉じないのは不便。

メニュー以外をクリックした際にこんな感じで閉じたい。

実装

今回のサイトはWordPressで作っていたため、テーマにのっとってコードを追記する必要があります。

そこで、devモードでコードを見ると、ハンバーガーメニューをクリックするとmenu-toggleクラスにactiveクラスが付与されるようにしていて、activeクラスがある場合はメニューがひらっきぱなしになるように組まれていました。

//メニューが閉じてるとき
<div class="menu-toggle">

//メニューを開いてるとき
<div class="menu-toggle active">

というわけで、メニュー外をクリックしたら、menu-toggleの部分からactiveを取り除くコードを記載すればOKです。

  jQuery(document).ready(function($) {
    var nav = $('.menu-toggle');
    $('.main-section').click(function() {
     //ここでnavの部分がactiveクラスを持っているか確認
      if(nav.hasClass('active')) {
        $('.menu-toggle').removeClass('active');
      }
    });
  });

jQuery(document).ready(function($)としているのは、サイトのHTMLを完全に読み込んでからこのjQueryを実行させたいからです。