閉じる以外をクリックされた場合

Question

【現状】
メニューを押した際に右サイドからメニュー画面を出し、閉じるボタンを押した際にはサイドのメニュー画面を閉じる
【理想】
閉じるボタン以外にも押した際(メニュー画面以外)を押した際にメニュー画面が閉じる

自分の中ではフラグを作り、メニューが押された場合にフラグが立ち、それ以外のところを押した場合に閉じさせ、フラグを0に戻す処理を書いたつもりでしたがうまくいきませんでした。

何がおかしいのか、その改善策を教えていただけたらと思います！

var menu_flg = 0;
$(document).ready(function () {
    if (($('.menu').click()) && menu_flg === 0) {
            $('header .menu').click(st.toggle_nav);
            menu_flg = 1;
        }
    $('.close_menu').click(st.toggle_nav);
    if (menu_flg === 1) {
            $('.content').click(st.toggle_nav);
            menu_flg = 0;
        }
}

Comments

[yambejp]

メニュー自体の構造はどうなっていますか？

[kei344]

HTMLも質問文に追記してください。

Answer 1

FLAGを使っても良いと思いますが、Jqueryの.toggleClassを使用すると楽です。

$(".menu,.close_menu,閉じるボタン以外の要素のセレクタ").click(function () {
    $('表示されるメニューのセレクタ').toggleClass('active');
});

表示されるメニューは.active時に表示、.activeが付いていない場合は非表示に設定します。

例

nav{
opacity:0;
pointer-events:none;
}

nav.active{
opacity:1;
pointer-events:auto;
}