トグル 領域外 閉じる

Question

<script>
(function($) {
    $(function() {
        var $header = $('#top-head');
        // Nav Fixed
        $(window).scroll(function() {
            if ($(window).scrollTop() > 350) {
                $header.addClass('fixed');
            } else {
                $header.removeClass('fixed');
            }
        });
        // Nav Toggle Button
        $('#nav-toggle').click(function(){
            $header.toggleClass('open');
        });
    });
})(jQuery);
</script>
	
</head>
	
<header id="top-head">
    <div class="inner">
        <div id="mobile-head">
            <h1 class="logo"><a href="index.html"><img src="images/logo.png" width="150px" alt="#"></a></h1>
            <div id="nav-toggle">
                <div>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <nav id="global-nav">
            <ul>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
		<li><a href="#">#</a></li>
           </ul>
        </nav>
    </div>
</header>

コード

こんにちは。
ハンバーガーメニューを挿入しました。
メニュー領域外をタップした時に、
メニューを閉じさせたいです。

$('#menu').click(function() {　event.stopPropagation();　});

こちらを挿入したのですが、閉じませんでした。

#menu
```の部分に、
全てのIDを試してみたのですが、ダメでした・・・

他のサイトでは、
stopPropagationを容易に使うのも、
あまり良くないとかいてありました。

この場合、何が最善でしょうか？
JavaScript や　JQueryがとても苦手なので、苦戦しております。
お力添えお願いします！！！

Comments

[x_x]

タップと書いていますが、端末は何でしょうか？

[退会済みユーザー]

端末は、スマホなど、画面の小さいものを想定してます！

Answer 1

メニュー範囲が思っているのと違うなら調整してください。

        $(document).on('click touchstart', function(event) {
            if (!$(event.target).closest('#top-head').length) {
                $header.removeClass('open');
            }
        });

Comments

[退会済みユーザー]

できました！！！！！
ありがとうございます。
本当に助かりました。
感謝しきれないです。。ありがとうございます！！！

[退会済みユーザー]

度々すみません。
こちらのscriptは、iframeの表示領域には反応しないでしょうか？
１ページ、アイフレームを使って構成しているものがありまして、

最初はそのページの何かが邪魔しているのかと色々試したのですが、
どうやらアイフレーム領域が反応しないようです。

こちらへの対処法が、あればお教えいただきたいです。
よろしくお願いいたします。

[x_x]

この辺の情報でどうでしょうか
http://nymemo.com/jquery/1384/
http://kkn.hateblo.jp/entry/2016/03/24/015542

Answer 2

解決につながるか分かりませんが、
ひとまず、id="menu" がhtml内のどこにもありません。
event　もfunction(event)　のように受け取らないと使えないはずです。

$('#menu').click(function(event) {
  event.stopPropagation();
});

何も渡さないとブラウザ開発ツールのコンソールにエラーが出力されるように思います。

他のサイトでは、

stopPropagationを容易に使うのも、
あまり良くないとかいてありました。

そのサイトを可能であればご提示ください。
「あまり良くない」では「実現のために使わない」根拠としては薄いです。

------以下、蛇足

Java や　JQery

JavaとJavaScriptは似て非なるものなので一緒にしてはいけません。
（メロンとメロンパンくらい違うという比喩を見かけました。すごく納得がいきます。）
あとJQeryではなくjQueryですね。なるべく表記は正しいものを。

Comments

[退会済みユーザー]

ご回答ありがとうございます！

まず、JavaとJQueryの件失礼いたしました。気をつけます。

あまり良くないと思ったというところの、サイトです。
あまり良くない、ではなく、
あまりオススメしないと書いてありました。
https://www.plusdesign.co.jp/blog/?p=5468

#menuですが、#menuがないのはわかるのですが、そのほかのID全て動作しませんでした。

[m.ts10806]

こちらの方が記事としてまとまっているように思います。
https://qiita.com/mabots/items/74c21ebcedf0004f7fb5

closest('#target').
の部分を
closest('#top-head').　か　
closest($header).
と変えて、
// ここに処理;　の部分をトグルクローズで書いてみてください。

[退会済みユーザー]

お返事いただいていたの見落としていました！
ありがとうございます。記事も参考にさせていただきます。