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

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

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

実装

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

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

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

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

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

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

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