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

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

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

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

jQuery

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

Q&A

0回答

423閲覧

jQueryでタブレット用のドロップダウンメニュー

MistySky

総合スコア6

iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

jQuery

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

0グッド

0クリップ

投稿2018/06/20 18:18

前提・実現したいこと

jQueryを用いてタブレット用のドロップダウンメガメニューを作っています。
ドロップダウンした状態でページ内遷移をした際に閉じるように作ろうと思い
ドロップダウンのボタンをクリックで閉じる処理を作りましたが
2回目に同じメニューをドロップダウンで表示しようとしても動きません。
eachの中のslideDownが発動しないためだと思いますが解決策が思いつかずご相談させていただきました。

該当のソースコード

html

1<nav class="header__nav"> 2<ul class="header__nav-list"> 3 <li class="header__nav-list-item"> 4 <a class="header__nav-link">AAAA</a> 5 <ul class="header__nav-sub"> 6 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#a1">a1</a></li> 7 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#a2">a2</a></li> 8 </ul> 9 </li> 10 <li class="header__nav-list-item"> 11 <a class="header__nav-link">BBBB</a> 12 <ul class="header__nav-sub"> 13 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#b1">b1</a></li> 14 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#b2">b2</a></li> 15 </ul> 16 </li> 17 <li class="header__nav-list-item"> 18 <a class="header__nav-link">CCCC</a> 19 <ul class="header__nav-sub"> 20 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#c1">c1</a></li> 21 <li class="header__nav-sub-item"><a class="header__nav-sub-link" href="#c2">c2</a></li> 22 </ul> 23 </li> 24</ul> 25</nav>

javascript

1 2 var ddmenu = '.header__nav'; 3 $('.header__nav-sub li:has(ul)').doubleTapToGo(); 4 5 $('>ul>li',ddmenu).each(function(){ 6 $(this).hover( 7 function(){ 8 $('>ul',this).stop(true,true).slideDown(200); 9 }, 10 function(){ 11 $('>ul',this).stop(true,true).slideUp(100); 12 } 13 ); 14 }); 15 /* 開いたところから閉じる処理 */ 16 $('>ul>li>ul>li',ddmenu).click(function(){ 17 $('>ul>li>ul',ddmenu).stop(true,true).slideUp(100); 18 });

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

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

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

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

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

m.ts10806

2018/06/21 01:06

タブレット(iPad?)以外での動作は如何でしょうか。
m.ts10806

2018/06/21 01:09

もしかしたらCSSも提示された方が良いかもしれません。あと利用しているプラグインとかバージョンとか。再現確認に必要です。
macaron_xxx

2018/06/21 01:32

おそらく、doubleTapToGoの設定の問題かと思います。実現したいコードは$('.header__nav li:has(ul)').doubleTapToGo();になるのではないでしょうか。また、その場合、header__nav-linkにリンクが貼られていないので、doubleTapToGoを使用する必要がありません。何を実現したいのか整理したほうがよいでしょう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問