Bootstrapのドロップダウンメニューを作っていた時、、、

• なぜかドロップダウンが動かない
• 何回クリックしても反応しない
• なぜか分からず数時間過ごす・・

みたいなムダな時間を過ごしてしまいました。

そこで将来の自分へのメモも兼ね、
Bootstrapのドロップダウンが動かない理由＆対処法 を紹介。

ドロップダウンは簡単に作れるけど、実はいろいろ罠も多かったです。

公式通りにやってるのにドロップダウンが動かない...

まず初めに、 ここでいうドロップダウンはこういう感じのやつ

▼ あるボタンをクリックすると・・・

▼ その下にメニューがずらずらと並ぶ

これが少ないコード（HTML）で作れるから便利です。

ただし、Bootstrap4 以降はこの作り方が少し変わりました。

▼ ドロップダウンのBoostrap4移行ガイド

Bootstrap4移行ガイド

 

6 Pockets

ドロップダウン～Bootstrap4移行ガイド

https://cccabinet.jpn.org/bootstrap4/components/dropdowns

Bootstrapドロップダウンプラグインで、リンクのリストなどを表示するための文脈上のオーバーレイを切り替える。

僕はBootstrap4を使っているので、このガイドを見ながらドロップダウンを作ってます。

でもなぜかドロップダウンが動かない・開いてくれないことが・・・

「変だな～」と思い原因を探ってたら、次の２つで解決できました。

原因１．jQuery とか必要なファイルを読み込んでいない

一番ありがちな原因がコレ

必要な jQuery とか popper.js を読みこんでないから

うっかりしてるとやりがちですね。
自分もこのせいでドロップダウンが動かなかったことが多いです。

というか そもそもの話・・・

Bootstrap は CSS（bootstrap.min.css）のみだとできることが限られてます。

▼ 公式のリファレンスでもこう説明されてる

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.

引用元　：　https://getbootstrap.com/docs/4.3/getting-started/introduction/

▼ この説明の超適当な意訳

Bootstrapの多くのコンポーネントはJavaScript的なのが必要。特にjQueryとかPopper.jsとかBootstrap固有のJSプラグインが必要なこともあるから気を付けよう！

ドロップダウンの場合 jQuery とか popper.js が必須だったみたいです。

あと bootstrap.min.js も読み込まないと当然機能しません。

もしそれらを読み込んでいないなら、次のscriptタグを追加すればOK

この例だとCDNから読み込んでるけど、直に読み込む方法もアリ

僕は「ドロップダウンくらいならCSS単体でもいけそう」みたいに勘違いしてたので、それが動かない原因になっていたみたいです。ちゃんと全部読み込みしたら、期待通りに動いてくれました。

原因２．そもそもドロップダウンの構造が間違っている

次にありがちな原因がコレ

ドロップダウンのHTML構造が間違ってるから

これも何回も何回も引っかかったポイントです。

• 正しいクラス名を付けているか、
• HTML構造は正しいかどうか
• 余計な要素を含めていないかどうか

こういうのを注意深く見ていく必要あり

たとえばボタン押下時にドロップダウン表示したいなら、その構成はこんな感じです。

▼ その場合のミニマム最低限なHTMLは次の通り（Bootstrap4）

ドロップダウンで【絶対】守らないといけないルールは次の５つ

• 全体を囲む要素のクラス名
  ドロップダウン全体を囲む要素には class="dropdown"  が必要。あったほうがいいけど、なくても一応動く（？）
• トグルボタンのid属性とクラス名
  必ずIDを id="btnOpenMenu"  のように割り振り、なおかつクラス名には dropdown-toggle  を含めておかないといけない
• トグルボタンのその他の属性
  これも必ず data-toggle="dropdown"  、 aria-haspopup="true"  、 aria-expanded="false"  の３つを設定すること。忘れると動かない
• ドロップダウンメニューのクラス名
  このクラス名には class="dropdown-menu"  を指定
• ドロップダウンメニューのaria-labelledby属性
  トグルのIDを指定する。上の例だと aria-labelledby="btnOpenMenu"  のように設定

意外と注意しないといけないことが多い (-_-;)

ドロップダウンが開かないときはこの５項目を要チェックです。

ドロップダウンが動かない原因は他にもある

ここで紹介した以外にも原因はまだあります。

挙げてけばキリないですが、今紹介した２つは本当にありがち

1.  jQuery とか Popper.js を読み込んでいない
2. ドロップダウンの構造が間違っている

以上、Bootstrapでドロップダウンが動かない原因でした。ではでは ($・・)/~~~