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

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

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

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

Q&A

解決済

1回答

2158閲覧

SlickNavを使ったメニューの領域外クリックについて

aaaaMAX

総合スコア16

jQuery

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

0グッド

0クリップ

投稿2018/09/08 10:52

編集2018/09/21 14:03

前提・実現したいこと

SlickNavを使ってドロワーメニューを作っています。
領域外をクリックした際にメニューが閉じるようにしたのはいいのですが、その後再度メニューボタンを押してもメニューがすぐには展開されず、2回クリックする必要があります。
領域外クリックでメニューが閉じ、その後1回のクリックで再度メニューが展開するようにするにはどうすればいいでしょうか。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/style.css" type="text/css" /> <title></title> </head> <body> <ul id="menu"> <li><a href="#">1</a> <li><a href="#">2</a> <li><a href="#">3</a> </ul> <span id="smart"></span>
<div id="main"> </div> <script src="js/jquery.js"></script> <script src="js/menu.js"></script>
</html>

試したこと

$(document).on('click touchend', function(event) {
if (!$(event.target).closest('.tappu_menu').length) {
$('.tappu_nav').slideUp(200);
}
});
を追記しました。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

使い方 http://slicknav.io/ を見ると、.slicknav('close')メソッドで閉じるようです。

jQuery

1$('.menu').slicknav('close');

-- HTMLに合わせたコードを追記

jQuery

1 $('#menu').slicknav({ 2 prependTo: '#main' 3 }); 4 5 $(document).on('click touchend', function(event) { 6 if (!$(event.target).closest('.slicknav_menu').length) { 7 $('#menu').slicknav('close'); 8 } 9 });

投稿2018/09/11 01:46

編集2018/09/25 06:38
x_x

総合スコア13749

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

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

aaaaMAX

2018/09/13 11:34

試しましたが、領域外クリックをしても閉じませんでした。
x_x

2018/09/13 14:48

クラスは自分のものに変えたのでしょうか? 動作確認はしてますが、HTMLが提示されていない以上、そこは自分で少し考えてほしいところです。
aaaaMAX

2018/09/15 12:43

クラスの変更は既にしました。 ご指摘を受けてHTMLを記述しました。気が回らず申し訳ございません。
x_x

2018/09/18 05:39

HTMLは依然として提示されていないようですが、CSSと間違えてますか?
aaaaMAX

2018/09/21 14:03

仰る通りCSSと間違えていました。すみません。
aaaaMAX

2018/09/29 05:29 編集

追記ありがとうございました。 教えていただいた内容を記述し、クラスの変更なども行いましたがやはり正常に動作しませんでした。 再度自分で考えてみることにし、この質問は締めさせていただきます。 長々とお付き合いいただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問