Bootstrap4でドロップダウンメニューの中にアコーディオンを作る！

こんにちは、プロクラスの渡辺です！
今日は備忘録も兼ねて、Bootstrap4を使って、ドロップダウンメニューを作った時に調べまくってたどり着いた方法をご紹介しようと思います 😉
難しいことは分からないからとりあえずコピペさせてほしい！っていう方もいらっしゃると思うので、コードも載せておきます。
ただ、私も難しいことは分からないので大したことは説明していません！！

さて、みんな大好き（なのかはわからないのですが）Bootstrapとここ最近やっとお近づきになれたので、意気揚々と使っていたのです！
「Bootstrap4以降ガイド」さんを見ながらやるとそれなりにちゃんとしたものができるのですが、今回はとある問題にぶち当たりました 😥

メニューボタンです！！！

スマホは対応しなくていいということだったので、メニューをずらずらと並べるのではなく「ドロップダウン」を使用したメニューを作ることになりました。ですが、メニューが入れ子になっているので、なんとかせねばなりません。
入れ子になっているだけなら、先駆者の方々がすでにブログなりをアップしてくださっているのですが、今回はそこに＋αがあります。

「階層のメニューは折り畳みになっている」

これです。ものすごく大変でしたが何とか力技で実現できたのでご紹介します。スマホ時の事は今回は記憶から消し去ることにしました！

実現したいこと

メニューボタンを押したらドロップダウンメニューが出てくる
一部だけ折り畳みメニューになっていて、入れ子になっている
折り畳みメニューによくある、ぬるっと動くアレがしたい

この3つを頑張って作ろうと思います！

1.メニューボタンを押したらドロップダウンメニューが出てくる

これは特に説明するほどでもないと思うのですが、普通ですね！
「コンポーネント」の「ドロップダウン」でドロップダウンメニューが作れます！
⇒移行ガイドさんのドロップダウンのページ

こんな感じですね 😀

2.一部だけ折り畳みメニューになっていて、入れ子になっている

これは単純に考えた結果、「ドロップダウン」の中に「折り畳み（アコーディオン）」を入れたらいいのでは！？
っていうことなので実際のコードはこちらです！▼


<div class="dropdown float-right">
  <button class="btn btn-secondary dropdown-toggle btn-nav" type="button">
	メニュー
  </button>
	 
<div class="test-nav dropdown-menu dm-nav">
<ul id="accordion_menu">
		  
	<li>
<a data-toggle="collapse" href="#menu01" aria-controls="#menu01" aria-expanded="false">予約登録</a>
		  </li>

		  
	<li>
<a data-toggle="collapse" href="#menu02" aria-controls="#menu02" aria-expanded="false">メール作成</a>
		  </li>

		  
	<li>
<a data-toggle="collapse" href="#menu03" aria-controls="#menu03" aria-expanded="false">予約関係<i class="fas fa-caret-down"></i></a>
		  </li>

		  
<ul id="menu03" class="collapse" data-parent="#accordion_menu">
	<li><a href="#">予約一覧</a></li>
	<li><a href="#">予約履歴一覧</a></li>
	<li><a href="#">キャンセル履歴</a></li>

		  </ul>

		  
	<li class="last">
<a data-toggle="collapse" href="#menu04" aria-controls="#menu04" aria-expanded="false">各種マスタ<i class="fas fa-caret-down"></i></a>
		  </li>

		  
<ul id="menu04" class="collapse" data-parent="#accordion_menu">
	<li class="ml-2"><a href="#">予約情報表示設定</a></li>
	<li class="ml-2"><a href="#">営業日設定</a></li>
	<li class="ml-2"><a href="#">講師設定</a></li>

		  </ul>
</ul>
</div>
</div>

今回作成したメニューは、右側にあって、ドロップダウンメニューは右揃えで出てきてほしかったのでcssをいじっています。あとは見た目をちょちょっと整えているので、cssも載せておきます▼

.click-show {
  display: block !important;
}
.dropdown-menu {
	left: -100%;
	width: 200%;
}
.dropdown-menu #accordion_menu {
    margin: 0;
    list-style: none;
    padding: 0 10px;
}
.dropdown-menu #accordion_menu ul {
    list-style: none;
    padding: 0px 5px;
}
.dropdown-menu #accordion_menu li {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
	position: relative;
}
.dropdown-menu #accordion_menu li .fas {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 5%;
}
.dropdown-menu #accordion_menu li.last {
	border-bottom: none;
}
.dropdown-menu #accordion_menu li a {
    color: #000;
	display: block;
}
.dropdown-menu #accordion_menu li a:hover {
	text-decoration: none;
	opacity: 0.8;
}

こんな感じになりました！ 😉

これで完成～～！

とはならないもので… 😥
ドロップダウンのクリックイベント名と、アコーディオンのクリックイベント名が同じなので、挙動がとってもおかしなことになってしまいました！！！
例えば、メニューを押して、「予約関係」をクリックしてから、メニューで閉じようとしても閉じれなくなっています

なので、ちょっとJSを追加しようと思います！

3.折り畳みメニューによくある、ぬるっと動くアレがしたい

やりたいことはこれです⇒「予約関係をクリックしたときに【click-show】というクラスを【dm-nav】に追加、削除する」

2で記載しているhtmlの中に「<div class=”test-nav dropdown-menu dm-nav”>」というタグがあると思いますが、この「dm-nav」がクリックされた時～ってことですね！
JSも記載しておきます▼

//メニューを押したときアコーディオンを開く
$(function(){
  var flg = "off";
  $('.dropdown-toggle').on('click', function(){
    if(flg == "off"){
      $('.dm-nav').addClass('click-show');
      flg = "on";
    }else{
      $('.dm-nav').removeClass('click-show');
      flg = "off";
    }
  });
});

これで！本当に！！完成しました～～！！！
でも本当に動くかはわからないのでテストページなどで試してみてください。。
コードを全部まるっとコピーしたら動くとは思います！！