So binden Sie Bootstrap-Dropdown-Box

Sie müssen JavaScript verwenden, um das Bootstrap-Dropdown-Feld zu binden. Befolgen Sie die folgenden Schritte: Führen Sie die Bootstrap JavaScript-Bibliothek ein. Instantieren Sie das Dropdown-Element mit der Dropdown-Klasse. Binden Sie Ereignishandler wie Show.bs.dropdown und Hidden.bs.dropdown. Rufen Sie Methoden der Dropdown -Klasse (z. B. show () und hide ()) auf, um das Verhalten des Dropdown -Felds zu steuern.

Bootstrap mit JavaScript, um Dropdown-Boxen zu binden

Bootstrap bietet einfache und benutzerfreundliche Komponenten, einschließlich Dropdown-Boxen. Um das Dropdown-Feld mit JavaScript zu binden, verwenden Sie die folgenden Schritte:

1. Einführung von Bootstrap JavaScript

Stellen Sie auf der HTML -Seite die Bootstrap JavaScript -Bibliothek ein:

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

2. Die Dropdown-Box instanziieren

Finden Sie das Dropdown -Element, an das Sie binden möchten, und instanziieren Sie es mit der Dropdown -Klasse von Bootstrap:

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

3. Bind Event Handler

Sie können verschiedene Ereignishandler nach Bedarf an den Dropdown-Box binden. Hier sind einige Beispiele:

• show.bs.dropdown : Ausgelöst, bevor das Dropdown-Feld angezeigt wird
• show.bs.dropdown : Ausgelöst, nachdem das Dropdown-Feld angezeigt wurde
• hide.bs.dropdown : ausgelöst, bevor das Dropdown-Box versteckt ist
• Hidden.bs.dropdown : Ausgelöst, nachdem das Dropdown-Box versteckt ist

Um diese Ereignisse zu binden, verwenden Sie on() -Methode:

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

4. Rufen Sie die Dropdown-Box-Methode auf

Sie können die Dropdown -Klassen -Methode verwenden, um das Verhalten des Dropdown -Felds zu steuern. Hier sind einige Beispiele:

• show () : Dropdown-Box anzeigen
• hide () : Verblenden Sie die Dropdown-Box aus
• Toggle () : Schalten Sie den Status der Anzeige/versteckt des Dropdown-Boxs um
• dispose () : Zerstöre die Dropdown-Box-Instanz

Um diese Methoden aufzurufen, verwenden Sie die folgende Syntax:

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

Wenn Sie diese Schritte ausführen, können Sie die Dropdown-Boxen in Bootstrap mit JavaScript problemlos binden und steuern.

Das obige ist der detaillierte Inhalt vonSo binden Sie Bootstrap-Dropdown-Box. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!