Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich mehrstufige Dropdowns in Bootstrap 4?

Wie erstelle ich mehrstufige Dropdowns in Bootstrap 4?

DDD
Freigeben: 2024-12-17 14:54:14
Original
878 Leute haben es durchsucht

How to Create Multilevel Dropdowns in Bootstrap 4?

Mehrstufige Dropdown-Navigation mit Bootstrap 4

Das Erstellen mehrstufiger Dropdown-Menüs in Bootstrap 4 kann mit minimalen CSS- und JavaScript-Änderungen erreicht werden. So können Sie es machen:

1. HTML-Struktur

Stellen Sie sicher, dass Ihre Navigation verschachtelte

-Elemente enthält. und
    Elemente wie folgt:

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      ...
      <div class="collapse navbar-collapse">
    Nach dem Login kopieren

    2. CSS-Styling

    Fügen Sie das folgende CSS zu Ihrem Stylesheet hinzu:

    .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;
    }
    Nach dem Login kopieren

    3. JavaScript

    Fügen Sie abschließend das folgende JavaScript hinzu:

    $('.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;
    });
    Nach dem Login kopieren

    Demonstration

    Mit diesem Ansatz können Sie komplexe mehrstufige Dropdowns erstellen, die nahtlos in Ihre Bootstrap 4-Navigation integriert sind. Dadurch wird sichergestellt, dass jeweils nur ein Untermenü geöffnet ist, wodurch Überlappungen oder Verschachtelungskonflikte vermieden werden.

    Das obige ist der detaillierte Inhalt vonWie erstelle ich mehrstufige Dropdowns in Bootstrap 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage