Comment fermer le menu réactif Bootstrap en cliquant sur ?

Fermer le menu réactif Bootstrap en un clic

Lors de la visualisation d'un site Web sur des appareils mobiles, l'utilisation d'un menu de navigation peut souvent s'avérer fastidieuse. Pour améliorer l'expérience utilisateur, il est souhaitable de fermer automatiquement la barre de navigation réactive lorsqu'un élément de menu est cliqué, affichant uniquement le contenu souhaité.

Cependant, en appliquant des solutions telles que $('.btn-navbar').click( ) ou $('.nav-collapse').toggle() peut entraîner des effets indésirables sur les vues du bureau, tels qu'un rétrécissement momentané du menu. Pour une solution plus efficace, envisagez les mesures suivantes :

Utilisation de sélecteurs d'attributs de données

Pour spécifier que le menu réactif doit se fermer lorsque vous cliquez sur un élément de menu, ajoutez data-toggle="collapse" et data-target=".navbar-collapse" attribue à l'élément correspondant, comme le montre ce qui suit exemple :

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

Répétez ce processus pour chaque élément de menu. Ce faisant, le menu changera de visibilité en fonction de la nature réactive de la mise en page.

Résoudre les problèmes de débordement et de scintillement

Si vous rencontrez des problèmes de débordement ou de scintillement avec la solution susmentionnée, vous peut mettre en œuvre les modifications suivantes :

<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>

L'attribution de classes spécifiques à la taille de l'écran aux éléments de menu résout efficacement ces problèmes, garantissant un fonctionnement transparent quel que soit l'appareil. size.

Mises à jour pour les versions Bootstrap

Pour Bootstrap v4.1.3 et v5.0, les classes visibles/cachées doivent être remplacées par d-none/d-sm-block et d-block /d-sm-none, respectivement.

Dans Bootstrap v5, remplacez les attributs data-toggle et data-target par data-bs-toggle et data-bs-target, respectivement.

En suivant ces directives, vous pouvez vous assurer que votre menu de navigation Bootstrap réactif se ferme automatiquement lorsque vous cliquez sur des éléments de menu, offrant ainsi une expérience utilisateur améliorée.

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!