お世話になります。ご質問です。
環境　bootstrap5

実現したい事。
ドロップダウンを作成したい。

エラー
ドロップダウンが反応しない

やったこと
bundle.min.jsをbootstrap.min.jsの前に追加しないといけないらしく、下記手順でやっています。
プラグイン読込

①jquery
②bundle.js
③bootstrap.min.js

コード

<script src="{{ asset('jquery-3.6.0/jquery-3.6.0.min.js') }}"></script>

<!-- bootstrap.bundle.min -->
<script src="{{ asset('bootstrap-5.1.1/dist/js/bootstrap.bundle.min.js') }}"></script>

<!-- boot.5.1.1 -->
<script src="{{ asset('bootstrap-5.1.1/dist/js/bootstrap.min.js') }}"></script>

html

<div class="dropdown">
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
    <li><a class="dropdown-item" href="#">メニュー3</a></li>
    <li><hr class="dropdown-divider"></li><!-- 横仕切り線 -->
    <li><a class="dropdown-item" href="#">その他リンク</a></li>
  </ul>
</div>

公式引用

ドロップダウンは、動的な位置決めとビューポートの検出を提供するサードパーティのライブラリであるPopper上に構築されており、BootstrapのJavaScript（bootstrap.js や bootstrap.min.jsなど）の前にpopper.min.jsを組み込むか、代わりにPopperを内部に含む bootstrap.bundle.js や bootstrap.bundle.min.js を使用する。ナビゲーションバーではドロップダウンの位置を決めるためには動的な位置決めは必要ないので、Popperは使用されない。

popper.js.orgpopper.js.org
Home
Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications.

行動規範の内容に同意します

回答1件

Bundleはpopper込みのBootStrap本体なので更に本体jsを読み込む必要はありません（むしろ機能バッティングが発生し得ます）。
本体CSSの読み込みはできていますか？
BootStrap5はjQuery依存がないバージョンなので、別途jQueryプラグインや自身でjQueryで組まない限りはなくてもアプリケーション構築は可能です。

追記

現在のHTMLが全てとしたら「ドロップダウンを出すためのトリガーとなる要素」がありません。
Dropdowns
たとえばボタンとか

※上記公式のサンプルコードからボタン部分だけをコピペしました。

html
1<div class="dropdown">
2
3  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
4    Dropdown button
5  </button>
6  <ul class="dropdown-menu">
7    <li><a class="dropdown-item" href="#">メニュー1</a></li>
8    <li><a class="dropdown-item" href="#">メニュー2</a></li>
9    <li><a class="dropdown-item" href="#">メニュー3</a></li>
10    <li><hr class="dropdown-divider"></li><!-- 横仕切り線 -->
11    <li><a class="dropdown-item" href="#">その他リンク</a></li>
12  </ul>
13</div>
14
15

投稿2021/11/24 21:07

編集2021/11/26 23:40

m.ts10806

総合スコア80875

lutan

2021/11/25 07:02

Bundleはpopper込みのBootStrap本体なので更に本体jsを読み込む必要はありません（むしろ機能バッティングが発生し得ます）。本体js削除しましたが、エラーになります。本体CSSの読み込みはできていますか？　→　はい！！読込しています。 BootStrap5はjQuery依存がないバージョンなので、別途jQueryプラグインや自身でjQueryで組まない限りはなくてもアプリケーション構築は可能です。他のプラグインでjqueryを使用しますので、組み込んでいます。