メニューの領域外をクリックすると、メニューが閉じるという動作

Question

以下のようなコードでメニューを作っております。
メニュー幅は画面の半分ほどで、
メニューを開いた状態で、領域外をクリックすると、メニューが閉じる、
という動作を追加したいです。
どなたか詳しい方教えていただけませんでしょうか。
よろしくお願いいたします。

<div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> <div id="gloval-nav"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> <script type="text/javascript"> (function($) { $(function () { $('#nav-toggle').on('click', function() { $('body').toggleClass('open'); }); }); })(jQuery); </script>

Comments

[maisumakun]

実装を試してみましたか？

[ymnm]

ここまでの動作は問題なく動きます。色々探して追加してみたのですが、どれもうまくいかずでして。。。

[maisumakun]

＞ 色々探して追加してみたのですが

どのようなことをやったのか書いてください。

[ymnm]

情報不足で申し訳ありません。
書いては消しをしていたので、もう一度書いてみましたが、
たとえば以下のようなものです。
これだと、そもそもメニューが開かなくなってしまいます。

<script>
//スマホハンバーガーメニュー
(function($) {
$(function () {
$('#nav-toggle').on('click', function() {
$('body').toggleClass('open');
});
});
$(document).click(function(event) {
if (!$(event.target).closest('#gloval-nav').length) {
$('#nav-toggle').removeClass('open');
$('#gloval-nav').hide();
}
});
});
})(jQuery);
</script>

Answer 1

1例です
documentのClickで領域外か判定して閉じています
参考までにどうぞ

document.addEventListener("click", (e)=>{
    if(!document.classList.contains("open")){
        return;
    }

    if(!e.target.closest("nav")){
      document.body.classList.remove("open")
    }
});

Comments

[ymnm]

回答ありがとうございます。
こういうことで合ってますでしょうか？無知ですいません。
追加したら、そもそもメニューが開かなくなってしまいました。
可能であればご教授いただけますでしょうか‥。

<script>
//スマホハンバーガーメニュー
(function($) {
$(function () {
$('#nav-toggle').on('click', function() {
$('body').toggleClass('open');
});
});
document.addEventListener("click", (e)=>{
if(!e.target.closest("nav")){
document.body.classList.remove("open")
}
});
})(jQuery);
</script>

[fijino]

scriptを修正しました。
これでどうでしょうか？
とりあえず、何しているか理解された方が良いです。
理解できれば問題があってもご自身で修正できるので。
もし、不明な処理があれば質問してください。

[ymnm]

ご親切にありがとうございます。
これでもダメだったのですが、おっしゃるように、もう少し理解をしないといけないようです。
いったん出直します。すいません。ありがとうございました。

Answer 2

htmlにbuttonタグを追加。
メニューが開いていない場合はdisplay:noneでボタンを隠しておく。開いたら透明なボタンが全体に出現するようにする。メニューはこの透明なボタンより上の階層になるようにする。(z-indexを使用)

透明なボタンを押すとメニューを閉じるボタンが押されるように設定