Bootstrapのドロップダウンが動かない時にありがちな2つの原因

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

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

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

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

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

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

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

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

Bootstrapで作ったドロップダウンの例。ボタンをクリックすると・・・

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

ボタンクリックで開かれたドロップダウンの例。実は動いてくれない罠が多い

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

 

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

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

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

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

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

原因1.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単体でもいけそう」みたいに勘違いしてたので、それが動かない原因になっていたみたいです。ちゃんと全部読み込みしたら、期待通りに動いてくれました。

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください