Q&A
drawer.js とはこれですか？
https://git.blivesta.com/drawer/
前提・実現したいこと
ドロワーメニューで多階層にしたい
※drawer.jsとBootstrapのdropdown.jsを使用
発生している問題・エラーメッセージ
1階層目（親階層）をクリックすると、2階層目は開くのですが、
その2階層目もすでに開かれている状態と認識されており、クリックすると親階層ごと閉じてしまいます。
ディベロッパーツールで、Menu2内の「<li class="drawer-dropdown">」にクラス名openを追加したら開くことは確認できたのですが、
階層ごとに個別で動かす方法がわかりません。
該当のソースコード
HTML
1<head> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 3<script type="text/javascript" charset="utf-8" src="javascripts/drawer.min.js"></script> 4<script type="text/javascript" charset="utf-8" src="javascripts/iscroll.js"></script> 5<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 6<script type="text/javascript"> 7$(document).ready(function(){ 8 $('.drawer').drawer(); 9}); 10</script> 11</head> 12<body> 13<div class="drawer drawer--top drawer--navbarTopGutter"> 14 <header class="drawer-navbar drawer-navbar--fixed" role="banner"> 15 <div class="drawer-container"> 16 <div class="drawer-navbar-header"> 17 <a class="drawer-brand" href="index_drawer.html"><div class="img_logo"><img src="#" width="313" height="60" alt="###" /></div></a> 18 <button type="button" class="drawer-toggle drawer-hamburger"> 19 <span class="sr-only">toggle navigation</span> 20 <span class="drawer-hamburger-icon"></span> 21 </button> 22 </div> 23 <nav class="drawer-nav" role="navigation"> 24 <ul class="drawer-menu"> 25 <li class="drawer-dropdown"> 26 <a class="drawer-menu-item" href="###" data-toggle="dropdown">Menu1<span class="drawer-caret"></span></a> 27 <ul class="drawer-dropdown-menu"> 28 <li><a class="drawer-dropdown-menu-item" href="#">Submenu1</a></li> 29 <li><a class="drawer-dropdown-menu-item" href="#">Submenu2</a></li> 30 <li><a class="drawer-dropdown-menu-item" href="#">Submenu3</a></li> 31 </ul> 32 </li> 33 <li class="drawer-dropdown"> 34 <a class="drawer-menu-item" href="#" data-toggle="dropdown">Menu2<span class="drawer-caret"></span></a> 35 <ul class="drawer-dropdown-menu"> 36 <li class="drawer-dropdown"> 37 <a class="drawer-menu-item" href="#" data-toggle="dropdown">Submenu1<span class="drawer-caret"></span></a> 38 <ul class="drawer-dropdown-menu"> 39 <li><a class="drawer-dropdown-menu-item" href="#">Submenu1-1</a></li> 40 <li><a class="drawer-dropdown-menu-item" href="#">Submenu1-2</a></li> 41 <li><a class="drawer-dropdown-menu-item" href="#">Submenu1-3</a></li> 42 </ul> 43 </li> 44 <li><a class="drawer-dropdown-menu-item" href="#">Submenu2</a></li> 45 <li><a class="drawer-dropdown-menu-item" href="#">Submenu3</a></li> 46 </ul> 47 </li> 48 <li><a class="drawer-menu-item" href="#">Menu3</a></li> 49 <li><a class="drawer-menu-item" href="#">TOPへ</a></li> 50 </ul> 51 </nav> 52 </div> 53 </header> 54 <main role="main"> 55 <!-- Page content --> 56 </main> 57</div> 58</body>
試したこと
1階層目と2階層目の「drawer-dropdown」を階層ごとに異なるクラス名にしてみましたが、その後どこを修正していいかわからなかったです。
補足情報（FW/ツールのバージョンなど）
・bootstrap.min.jsはどこからDLしてよいかわからず、現在のコードの通りに設定しています。
Lhankor_Mhy様
ご説明が不足しており、申し訳ございません。
ご提示いただいたURLから進んで「drawer.min.js」というファイルをダウンロードし、読み込んでおります。私の記載が漏れており恐縮ですが、同じページから「drawer.min.css」というファイルもDLしてhead内で読み込んでおります。
ドキュメントにあるようなコードになっていないように思うのですが、これはどういう意図ですか？
https://getbootstrap.com/docs/3.3/javascript/#dropdowns
参考にしていたサイトにあったものを元に記載していました。
https://haniwaman.com/drawer-js/#i-8
ページ最後あたりのおまけの部分です。
ご提示のページには、
<script>
$(document).ready(function() {
$('.drawer').drawer();
});
</script>
というコードがありましたが、これを除去した意図はどういうものですか？
たびたび申し訳ございません。
GA用のscriptに公開できない情報があったため、記載から省略した際に一緒に消しておりました。
ご連絡いただいたコードはheadの最後に今は記載しています。
※ソースコードを修正しました
回答1件
0
ベストアンサー
そのままでは難しそうです。
ググったところ、以下のようなコードがありました。
おそらく、このようにstopPropagation()で止めて上書きするみたいな感じで対応しないと難しいと思います。
投稿2021/10/27 05:12
総合スコア36074
参考のコードを教えていただきありがとうございます！
コードを確認しながら反映してみたら、実現したい動作になりました！
横に表示されるボタンが上手く連動しなかったところも、クラスを追加してCSSをあてるなどで、対応出来そうな気がします。
助かりました！
あなたの回答
tips
プレビュー
