Comment lier la boîte déroulante Bootstrap

Vous devez utiliser JavaScript pour lier la boîte déroulante Bootstrap, suivez ces étapes: introduisez la bibliothèque JavaScript Bootstrap. Instanciez l'élément déroulant à l'aide de la classe déroulante. Bond les gestionnaires d'événements tels que show.bs.dropdown et Hidden.bs.dropdown. Méthodes d'appel de la classe déroulante (telles que Show () et Hide ()) pour contrôler le comportement de la zone déroulante.

Bootstrap en utilisant JavaScript pour lier les boîtes déroulantes

Bootstrap fournit des composants simples et faciles à utiliser, y compris des boîtes déroulantes. Pour lier la zone déroulante à l'aide de JavaScript, utilisez les étapes suivantes:

1. Présentation de Bootstrap JavaScript

Dans la page HTML, introduisez la bibliothèque JavaScript Bootstrap:

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

2. Instancier la boîte déroulante

Trouvez l'élément déroulant que vous souhaitez vous lier et instanciez-le à l'aide de la classe déroulante de Bootstrap:

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

3. Binding Event Handler

Vous pouvez lier divers gestionnaires d'événements à la boîte déroulante au besoin. Voici quelques exemples:

• show.bs.dropdown : déclenché avant que la boîte déroulante ne s'affiche
• show.bs.dropdown : déclenché après s'afficher la boîte déroulante
• hide.bs.dropdown : déclenché avant que la boîte déroulante ne soit cachée
• Hidden.bs.dropdown : déclenché après que la boîte déroulante est cachée

Pour lier ces événements, utilisez on() :

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

4. Appelez la méthode de la boîte déroulante

Vous pouvez utiliser la méthode de classe déroulante pour contrôler le comportement de la zone déroulante. Voici quelques exemples:

• show () : Show Drop-down Box
• hide () : masquer la boîte déroulante
• toggle () : basculer l'état / état caché de la boîte déroulante
• dissposer () : détruire l'instance de boîte déroulante

Pour appeler ces méthodes, utilisez la syntaxe suivante:

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

En suivant ces étapes, vous pouvez facilement lier et contrôler les boîtes déroulantes dans Bootstrap à l'aide de JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!