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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2647閲覧

bootstrap使用ドロップダウンリンククリック時にメニューが閉じないようにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/28 07:36

お世話になっております。
drawer
http://git.blivesta.com/drawer/
を使用したドロワーメニューを作成しております。昨日こちらでのご助力もいただき、完成に近づきました。
今回お力を頂きたいのは、ドロワー内のドロップダウンメニューリンクをスマートフォンでタップした際、メニューが閉じてしまう点を修正したく思っております。
リンクで飛ぶためその場所にはとどまらないのですが、挙動が気になりました。現在のコードは以下の通りです。

<a name="pagetop"></a> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- jS読み込み --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.js"></script> <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/swipebox/jquery.swipebox.js"></script> <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/sp.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script> <!-- CSS読み込み --> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/css/gmenu.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/base.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/common.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/swipebox/swipebox.css" media="all" /> <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.min.css"> <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.style.css"> </head> <div class="drawer drawer--left"> <nav class="drawer-nav"> <ul class="drawer-menu"> <li class="drawer-design7"><a href="http://www.cambio-w.com/">WOMEN</a></li> <li class="drawer-design6"><a href="http://www.cambio.co.jp/">MEN</a></li> <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/MailMagazineEntry.html">&#062;メルマガ登録</a></li> <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/Login.html">&#062;ログイン</a></li> <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/Logout.html">&#062;ログアウト</a></li> <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/MyPageTop.html">&#062;マイページ</a></li> <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/CouponInformation.html">&#062;クーポン</a></li> <li class="drawer-design3">人気・新着・注目</li> <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/ranking">&#062;ランキング</a></li> <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/winter2018">&#062;新作アイテム</a></li> <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/?id=reservation">&#062;予約開催中ブランド</a></li> <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/sale">&#062;SALEアイテム</a></li> <ul class="drawer-menu"> <li class="drawer-dropdown"> <a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">カテゴリー<span class="drawer-caret"></span></a> <ul class="drawer-dropdown-menu"> <li><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/onepiece"><font color="#333333">ワンピース</font></a></li> <li><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/tops"><font color="#333333">トップス</font></a></li> <li><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/shirt"><font color="#333333">シャツ・ブラウス</font></a></li> <li><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/knit"><font color="#333333">ニット</font></a></li> </ul> </li> <ul class="drawer-menu"> <li class="drawer-dropdown"> <a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">ブランド<span class="drawer-caret"></span></a> <ul class="drawer-dropdown-menu"> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/bedsidedrama"><font color="#333333">bedsidedrama</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/cambio"><font color="#333333">CAMBIO</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/dazzlin"><font color="#333333">dazzlin</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/dannyandanne"><font color="#333333">Danny&Anne</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/diddlediddle"><font color="#333333">diddlediddle</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/drwcys"><font color="#333333">DRWCYS</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/fiction"><font color="#333333">FICTION TOKYO</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/jouetie"><font color="#333333">jouetie</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/la_maison"><font color="#333333">La Maison de Lyllis</font></a></li> </ul> </li> <li class="drawer-design4"><a href="https://c10.future-shop.jp/fs/lady/MemberEntryEdit.html">・会員登録</a></li> <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/c/guide">・ご利用ガイド</a></li> <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/c/guide?id=carriage">・送料について</a></li> <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/PrivacyPolicy.html">・プライバシーポリシー</a></li> <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/c/mail">・お問合せ</a></li> <li class="drawer-design5"><a href="http://www.cambio-w.com/fs/lady/BusinessDeal.html">・特定商取引法に基づく表記</a></li> </ul> </nav> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> <script type="text/javascript"> jQuery(function($) { $(".swipebox").swipebox(); }); </script> <!-- ヘッダー看板 --> <div class="headerbox"> <table> <tr><td> <a href="http://www.cambio-w.com/"><img src="https://secure2.future-shop.jp/~lady/smartphone/header_button_false.jpg" width="100%"> </td> <td> <a href="http://www.cambio-w.com/fs/lady/ShoppingCart.html"><img src="https://secure2.future-shop.jp/~lady/smartphone/l-header_right_sp2.png" width="100%"></a> </td> <td> <a href="http://www.cambio-w.com/fs/lady/WishList.html"><img src="https://secure2.future-shop.jp/~lady/smartphone/l-header_right_sp.png" width="100%"></a> </td> </table> </div> <!-- ヘッダー看板終わり --> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> </div>

試してみたのは、
【ドロップダウンを開いた状態でページを読み込む方法】
http://bootstrap3.cyberlab.info/javascript/dropdowns-javascript.html#

ですが、

<a class="drawer-menu-item id="sampleButton" drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">カテゴリー<span class="drawer-caret"></span></a>

太字部分を追記し、

<script>
$( function() {
$('#sampleButton').dropdown('toggle');
} );
</script>

<script> $(document).ready(function() { $('.drawer').drawer(); }); </script>

drawerの使用宣言の前に上記太字部分を追記しましたが
上手く起動しませんでした。また、これよりスマートな方法があればと思っております。

何卒お力頂けますと幸いです。

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

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

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

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

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

s8_chu

2019/01/28 08:16 編集

> スマートフォンでタップした際、メニューが閉じてしまう点を修正したく思っております。 PC ではメニューが閉じる現象は発生しない、ということでしょうか? また、スマートフォンでのみメニューが閉じてしまうことを抑制したいのですか?
退会済みユーザー

退会済みユーザー

2019/01/28 08:29 編集

ご確認ありがとうございます。 PCでもリンクをクリックすると同時にドロップダウンが閉じてしまう現象はあります。 ただ、作成しているページはスマートフォン専用のページであるため、基本的にはスマートフォンでメニューが閉じてしまう事が修正できれば良いと考えております。わかりにくく申し訳ございません。
guest

回答1

0

ベストアンサー

stopPropagationメソッドにより、イベントの伝播を止めることで可能だと思います(動作確認用リンク)。

jQuery

1$(".drawer-dropdown-menu a").on("click", function (e) { 2 e.stopPropagation(); 3});

投稿2019/01/28 08:30

編集2019/01/28 09:23
s8_chu

総合スコア14731

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

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

退会済みユーザー

退会済みユーザー

2019/01/28 09:53

s8_chu様 ご回答頂きありがとうございました!実装したところ、希望していた動作になりました。 ご丁寧にありがとうございます。
退会済みユーザー

退会済みユーザー

2019/01/28 09:53

s8_chu様 ご回答頂きありがとうございました!実装したところ、希望していた動作になりました。 ご丁寧にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問