ブートストラップドロップダウンボックスをバインドする方法

JavaScriptを使用してブートストラップドロップダウンボックスにバインドする必要があります。次の手順に従ってください。BootstrapJavaScriptライブラリを紹介します。ドロップダウンクラスを使用してドロップダウン要素をインスタンス化します。 show.bs.dropdownやhidden.bs.dropdownなどのバインドイベントハンドラー。ドロップダウンクラスのメソッド（show（）やhide（）など）を呼び出して、ドロップダウンボックスの動作を制御します。

JavaScriptを使用してドロップダウンボックスをバインドするブートストラップ

Bootstrapは、ドロップダウンボックスを含むシンプルで使いやすいコンポーネントを提供します。 JavaScriptを使用してドロップダウンボックスをバインドするには、次の手順を使用します。

1.ブートストラップJavaScriptの導入

HTMLページで、Bootstrap JavaScriptライブラリを紹介します。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

2。ドロップダウンボックスをインスタンス化します

バインドしたいドロップダウン要素を見つけ、Bootstrapのドロップダウンクラスを使用してインスタンス化します。

 <code class="javascript">const dropdown = new bootstrap.Dropdown(document.getElementById('dropdown-element'));</code>

3。イベントハンドラーをバインドします

必要に応じて、さまざまなイベントハンドラーをドロップダウンボックスにバインドできます。ここにいくつかの例があります：

• show.bs.dropdown ：ドロップダウンボックスが表示される前にトリガーされます
• show.bs.dropdown ：ドロップダウンボックスが表示された後にトリガーされます
• hide.bs.dropdown ：ドロップダウンボックスが隠される前にトリガーされます
• hidden.bs.dropdown ：ドロップダウンボックスが隠された後にトリガーされます

これらのイベントを結合するには、 on()メソッドを使用します。

 <code class="javascript">dropdown.on('show.bs.dropdown', (e) => { // 在此添加要执行的操作}); dropdown.on('hidden.bs.dropdown', (e) => { // 在此添加要执行的操作});</code>

4.ドロップダウンボックスメソッドを呼び出します

ドロップダウンクラスの方法を使用して、ドロップダウンボックスの動作を制御できます。ここにいくつかの例があります：

• show（） ：ドロップダウンボックスを表示します
• Hide（） ：ドロップダウンボックスを非表示にします
• トグル（） ：ドロップダウンボックスの表示/非表示状態を切り替える
• Dispose（） ：ドロップダウンボックスインスタンスを破壊します

これらのメソッドを呼び出すには、次の構文を使用します。

 <code class="javascript">dropdown.show(); dropdown.hide(); dropdown.toggle(); dropdown.dispose();</code>

これらの手順に従うことにより、JavaScriptを使用してBootstrapのドロップダウンボックスを簡単にバインドおよび制御できます。

以上がブートストラップドロップダウンボックスをバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。