Maison >interface Web >tutoriel CSS >Comment puis-je créer des listes déroulantes à plusieurs niveaux dans la navigation Bootstrap 4 ?
Bootstrap 4 : Libérer des listes déroulantes à plusieurs niveaux dans les navigations
Lorsque vous recherchez un moyen transparent d'incorporer des listes déroulantes à plusieurs niveaux dans Bootstrap 4, ne cherchez pas plus loin. Les extraits CSS et JavaScript suivants vous guideront tout au long du processus.
CSS pour les sous-menus déroulants
Ce CSS cible la création de styles de sous-menus déroulants supplémentaires.
.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; }
JavaScript pour basculer le sous-menu
Ce JavaScript gère le basculement de la visibilité des sous-menus déroulants.
$('.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; });
Exemple HTML
Incorporant CSS et JavaScript, cet exemple HTML montre une liste déroulante fonctionnelle à trois niveaux.
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!