質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1129閲覧

ドロワーメニューを閉じる時に範囲外をクリックで閉じる様にしたい

Natsu9999

総合スコア20

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/03/22 17:23

編集2018/03/23 02:43

前提・実現したいこと

元ネタ
https://codepen.io/RRoberts/pen/OXxkzm?q=mobile%2520navigation&order=popularity&depth=everything&show_forks=false
こちらの一番左のタイプのドロワーに、範囲外のクリックでも閉じるのを追加したいです。

https://qiita.com/mabots/items/74c21ebcedf0004f7fb5
ここを参考に書いたのですが
記述方法が悪いのか、動きません、

どう書くのが正しいのでしょうか?

元のソースコード

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script> jQuery(function($) { //MOBILE ONE AND MOBILE THREE var menu = "close"; $(".menu-toggle").click(function() { if (menu === "close") { $(this).parent().next(".mobile-nav").css("transform", "translate(0, 0)"); menu = "open"; } else { $(this).parent().next(".mobile-nav").css("transform", "translate(-100%, 0)"); menu = "close"; } }); }); </script>

試したこと

<script> jQuery(function($) { //MOBILE ONE AND MOBILE THREE var menu = "close"; $(".menu-toggle").click(function() { $(this).parent().next(".mobile-nav").css("transform", "translate(0, 0)"); menu = "open"; }); $(document).on('click touchend', function(event) { if (!$(event.target).closest('.mobile-nav').length) { // ここに処理; $(this).css("transform", "translate(-100%, 0)"); menu = "close"; } }); }); </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/03/23 00:21

メニュー部のHTMLも提示して下さい
kei344

2018/03/23 02:23

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答3

0

ベストアンサー

documentで捕捉するのでthisは使えません。
判定はheaderクラスですね。なので、以下のようになります。

JavaScript

1 $(document).on('click touchend', function(event) { 2 if (!$(event.target).closest('.header').length) { 3 $(".mobile-nav").css("transform", "translate(-100%, 0)"); 4 menu = "close"; 5 } else { 6 $(".mobile-nav").css("transform", "translate(0, 0)"); 7 menu = "open"; 8 } 9 });

ただ、メニュー自体は反応しなくなるので若干使い勝手が悪いです。
前に似たような質問に回答しているので参考にしてみてください。
https://teratail.com/questions/112143

-- 18:07追記
フラグ管理しているのと判定もおかしかったので修正します。

JavaScript

1 $(document).on('click touchend', function(event) { 2 var target = $(event.target); 3 if (menu === 'close' && target.closest('.header').length) { 4 $('.mobile-nav').css('transform', 'translate(0, 0)'); 5 menu = 'open'; 6 } else if (!target.closest('.mobile-nav').length) { 7 $('.mobile-nav').css('transform', 'translate(-100%, 0)'); 8 menu = 'close'; 9 } 10 });

投稿2018/03/23 07:00

編集2018/03/23 09:11
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ありがとうございます。
二度クリックが必要だったりとやはり挙動がおかしくなりますね参考になりました。

投稿2018/03/26 03:23

Natsu9999

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/03/26 11:40

おかしくなるのは確認できませんでした。解決していないのであれば質問を続行してください。
guest

0

js

1$(".menu-toggle").click(...)

と書いてあるので、.menu-toggleをクリックしたら処理と言う意味です。

なので例えばドロワーメニューのクラスが.drawer-menuなら、

js

1$(!'.drawer-menu').click(...)

のように.drawer-menu以外をクリックしたら処理と言う内容を加えてあげれば良いと思います。

投稿2018/03/23 00:06

stampdoor

総合スコア483

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/03/23 00:14

これ, 本当に試しましたか?
stampdoor

2018/03/23 00:49

html部分がないので試してはいません。 意味的にはそういう処理をするのが良いと思います、ということです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問