La création de listes déroulantes à plusieurs niveaux dans Bootstrap 4 peut être réalisée avec un minimum de modifications CSS et JavaScript. Voici comment procéder :
Assurez-vous que votre navigation contient des éléments
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> ... <div class="collapse navbar-collapse">
Ajoutez le CSS suivant à votre feuille de style :
.dropdown-submenu { position: relative; } .dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-left: .1rem; margin-right: .1rem; }
Enfin, ajoutez le JavaScript suivant :
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass('show'); } var $subMenu = $(this).next('.dropdown-menu'); $subMenu.toggleClass('show'); $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass('show'); }); return false; });
Cette approche vous permet de créer des listes déroulantes multiniveaux complexes parfaitement intégrées à votre navigation Bootstrap 4. Il garantit qu'un seul sous-menu est ouvert à la fois, évitant ainsi les chevauchements ou les conflits d'imbrication.
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!