Comment fermer automatiquement un menu réactif Bootstrap lors d'un clic sur un élément ?

Bootstrap : fermeture automatique du menu réactif lors du clic sur un élément de menu

Lors de l'affichage des menus réactifs dans Bootstrap, vous souhaiterez peut-être fermer automatiquement le menu après avoir cliqué sur un élément de menu sur un appareil mobile ou une tablette tout en conservant l'état ouvert sur le bureau.

Problème :

L'utilisateur a tenté d'utiliser $('.btn -navbar').click(); et $('.nav-collapse').toggle(); pour obtenir ce comportement, mais cela a provoqué un rétrécissement inattendu du menu sur le bureau.

Solution :

Pour résoudre ce problème, modifiez les éléments de votre menu pour inclure la bascule de données. et les attributs de cible de données, comme vous le feriez avec le bouton bascule de la barre de navigation. Par exemple, pour l'élément de menu « Produits » :

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Répétez cette opération pour chaque élément de menu.

Corrections supplémentaires :

Pour répondre problèmes de débordement et de scintillement, ajoutez le code suivant :

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Cela rendra les sélecteurs de bascule et de cible spécifiques à la taille de l'écran, éliminant ainsi les problèmes dans le menu plus grand.

Version Bootstrap Mises à jour :

• Bootstrap v4.1.3 et v5.0 : Remplacez les classes visibles/cachées par d-none d-sm-block et d-block d-sm -aucun.
• Bootstrap v5 : Remplacez data-toggle par data-bs-toggle et data-target par data-bs-target.

En implémentant Ces modifications, vous pouvez fermer automatiquement le menu réactif lors des clics sur les éléments de menu tout en conservant sa fonctionnalité sur les appareils de bureau.

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!