Bootstrapのドロップダウンが動かない場合の対処法!

この記事では、Bootstrapのdropdowns(ドロップダウン)が動かない場合の対処法をご紹介します!実装時によくある動かない原因とサンプルコードの説明もしているので、動いていないコードとの違いを確認してみましょう!

コンテンツ [表示]

  1. 1Bootstrapのドロップダウン(dropdown)が動かない
  2. 2Bootstrapのドロップダウン(dropdown)が動かない場合の対処法
  3. 2.1原因1. cssが読み込めていない、またはHTML構造やclass名が間違っている
  4. 2.2原因2. Javasciprtが読み込めていない
  5. 2.3それでも動かないときは・・・
  6. 3Bootstrap 5について・・・
  7. 4まとめ

Bootstrapのドロップダウン(dropdown)が動かない

Bootstrapとは、WEBサイトやWEBアプリケーションを作成するフロントエンドWEBアプリケーションフレームワークです。

タイポグラフィ、フォーム、ボタン、ナビゲーション、その他にもたくさんのHTMLとcssを使ったコンポーネントが用意されてます。

今回は、下の画像のようなドロップダウンが動かない場合の対処法をご紹介します。

※Bootstrap4(4.5.2)を対象としていますのでご注意ください。

Bootstrapのドロップダウン(dropdown)が動かない場合の対処法

それでは、Bootstrapのdropdowns(ドロップダウン)が動かない場合の対処法について見ていきましょう!

サンプルコードもありますのぜひ参考にしてみてください。

原因1. cssが読み込めていない、またはHTML構造やclass名が間違っている

まずは、cssが読み込めていなかったり、HTML構造やclass名が間違っていないか確認しましょう。

もし、スタイルが効かない場合はこのあたりが原因である可能性が高いです。

【HTML】cssが読み込めていない、またはHTML構造やclass名が間違っている

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

下のサンプルコードは、HTML構造やclass名の一部抜粋となります。

【HTML】cssが読み込めていない、またはHTML構造やclass名が間違っている

<!-- Example single danger button -->
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">Primary</button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

隠れているメニューの表示に関わるので、button要素に.dropdown-toggleclass属性とdata-toggle="dropdown"の属性を付与してください。

その次の要素に.dropdown-menuclass属性を付与します。

その他については、ボタンのスタイルによるclass属性です。

aria-haspopup属性とaria-expanded属性というのは、WAI-ARIAという、ブラウザによる支援技術です。

ユーザーのアクセシビリティを向上させるために昨今ではWEBアプリケーションだけに関わらず、大手のWEBサイトにも多く利用されています。

WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN
前回の記事に続いて言えることですが、意味論的ではない HTML や JavaScript によって更新される動的なコンテンツを含むような、複雑な UI コントロールの作成は難しくなることがあります。 WAI-ARIA は、ブラウザーや支援技術が認識できるさらなる意味論を追加することによってそのような問題に対処し、ユーザーの理解を助ける技術です。 ここでは、アクセシビリティを向上させるための基本的な使い方を説明します。

原因2. Javasciprtが読み込めていない

HTMLの構造も問題なく、スタイルも整っているのにボタンをクリックしてもメニューが表示されない。

そんなときは、必要なJavascriptファイルが読み込まれていない可能性があります。

下のサンプルコードが読み込まれているか確認してみましょう!

【HTML】原因2. jQueryなどの必要なJavasciprtファイルが読み込めていない

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<!-- popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
<!-- bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>

注意点は、jQueryとbootstrapのJSファイルは読み込んでいるのに、クリックしても表示されないという例がよくあるみたいです。

実装には、popperというJSファイルも必要になりますので、読み込まれているかよく確認しましょう!

また、Javascriptの場合はプログラムを実行する流れもあるので、読込むファイルの順番にも注意してください。

それでも動かないときは・・・

プレビュー付きのサンプルコードよりコピーアンドペーストして利用しましょう。

動かなくなる原因が分からない初心者のうちは、きちんと動くソースコードから少しずつ変更するように心がけましょう!

今回は、動かない場合の対処法になるので、もっとたくさんのパターンのドロップダウンを使いたい場合は、日本語の本家リファレンスサイトもあわせて読んでみてください。

Dropdowns - Bootstrap 4.5 - 日本語リファレンス
Dropdowns(ドロップダウン)はプラグインを使用して, リンクのリストなどを表示するコンテキストオーバーレイを切り替えます。ドロップダウンの使い方の例を示します。

Bootstrap 5について・・・

今回はBootstrap4(4.5.2)についての説明でしたが、

現在(2021年1月26日)、すでに最新版のBootstrap 5.0.0のベータ版がリリースされています。

主な変更点としては、依存関係のあったjQueryを完全に削除し、SVGのカスタムアイコン(去年リリース済み)の追加、CSSとJavaScriptの簡素化・修正・改良、IE10のサポート終了が挙げられます。

jQueryが完全に削除されるそうなので、Javascriptのあたりに大きく変更がありそうですね!

Bootstrap - 世界で最も人気のあるフロントエンドのコンポーネントライブラリ
世界で最も人気のあるフロントエンドのコンポーネントライブラリ

まとめ

今回は、Bootstrapのdropdowns(ドロップダウン)が動かない場合の対処法をについてご紹介しました。

1つずつチェックしてみると意外と簡単なところに原因があったりします。

経験を積めば、どこに原因があるのか分かるようなってきますので、皆さんも頑張ってくださいね!

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

Qumeru事務局
ライター

Qumeru事務局