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

Question

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

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

Comments

[s8_chu]

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

[退会済みユーザー]

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

Answer 1

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

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

Comments

[退会済みユーザー]

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

[退会済みユーザー]

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