So erstellen Sie einen mehrstufigen Dropdown in Bootstrap

Um ein mehrstufiges Dropdown-Menü für Bootstrap 5 zu erstellen, müssen Sie benutzerdefinierte CSS- und JavaScript-Implementierung kombinieren. 1. Verwenden Sie eine Standard-Dropdown-Struktur und ein Nest-Untermenü mit Dropdown-Submenu-Klasse; 2. Fügen Sie CSS -Positionierungs -Untermenü (wie links: 100%) hinzu und fügen Sie optional Pfeilstile hinzu. 3.. Verwenden Sie JavaScript, um zu verhindern, dass Ereignisse sprudeln und das Untermenü -Display schalten, oder verwenden Sie: Hover -Trigger; 4. Stellen Sie die Einführung von CSS und JS CDN von Bootstrap 5.3.2 sicher; Achten Sie auf das mobile Erlebnis- und Zugänglichkeitsunterstützung von ARIA-Attributen und erkennen Sie schließlich das aufgerichtete Dropdown-Menü mit mehreren Ebenen.

Erstellen eines mehrstufigen Dropdowns in Bootstrap (insbesondere Bootstrap 5, da frühere Versionen mehr integrierte Unterstützung für Dropdowns hatten), erfordert ein Stück benutzerdefinierter CSS und die richtige HTML-Struktur, da Bootstrap 5 verschachtelte Drops standardmäßig nicht unterstützt. So können Sie mit Bootstrap 5 ein funktionierendes mehrstufiges Dropdown-Menü erstellen.

1. grundlegende HTML -Struktur

Beginnen Sie mit einem Standard -Bootstrap -Dropdown- und Nest zusätzliche Dropdown -Menüs im Inneren.

 <div class = "Dropdown">
  <button class = "btn btn-primary Dropdown-Toggle" type = "button" id = "DropdownMenubutton" data-bs-toggle = "Dropdown" aria-expanded = "false">
    Multi-Level-Dropdown
  </button>
  <ul class = "Dropdown-Menu" aria-labelledBy = "DropdownMenubutton">
    <li> <a class = "Dropdown-iTem" href = "#"> Punkt 1 </a> </li>
    <li> <a class = "Dropdown-iTem" href = "#"> Artikel 2 </a> </li>

    <!-verschachtelter Dropdown-Trigger->
    <li class = "Dropdown-Submenu">
      <a class = "Dropdown-item Dropdown-Toggle" href = "#"> submenu </a>
      <ul class = "Dropdown-Menu">
        <li> <a class = "Dropdown-item" href = "#"> sub-item 1 </a> </li>
        <li> <a class = "Dropdown-iTem" href = "#"> sub-item 2 </a> </li>

        <!-dritte Ebene->
        <li class = "Dropdown-Submenu">
          <a class = "Dropdown-item Dropdown-Toggle" href = "#"> sub-submenu </a>
          <ul class = "Dropdown-Menu">
            <li> <a class = "dropdown-item" href = "#"> endgültiger Punkt 1 </a> </li>
            <li> <a class = "dropdown-item" href = "#"> endgültiges Punkt 2 </a> </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

2. Fügen Sie benutzerdefinierte CSS für verschachtelte Menüs hinzu

Bootstrap stymt nicht .dropdown-menu verschachtelt.

 / * Positions -Untermenü relativ zu Eltern */
.dropdown-submenu {
  Position: Relativ;
}

/ * Untermenü auf schweber anzeigen oder klicken Sie (optional) *//////////
.dropdown-Submenu .dropdown-menu {
  Top: 0;
  Links: 100%;
  Rand: -6px;
  Rand -Links: -1px;
  Grenzradius: 0,375Rem;
}

/ * Optional: Pfeilantrieb für Untermenüs addieren */
.dropdown-toggle :: nach {
  Rand-Links: Auto;
  Rand-Rechts: 0;
}

.dropdown-Submenu .dropdown-toggle :: After {{
  Margin-Links: 0,25EM;
  vertikaler Align: 0,255EM;
  Grenze: 0,3Em fest;
  Grenzrechte: 0,3EM Solid transparent;
  Grenzboden: 0;
  Grenz-links: 0,3Em fest transparent;
}

3.. Halten Sie den Untermenü mit JavaScript um (optional).

Standardmäßig verbirgt Bootstrap alle Dropdowns auf Klick. Um verschachtelte Menüs zu öffnen, können Sie ein kleines Skript verwenden, um die Ausbreitung zu stoppen und die Sichtbarkeit zu umschalten.

 document.querySelectorAll ('. Dropdown-Submenu a.dropdown-toggle'). foreach (Funktion (Element) {
  element.addeventListener ('klick', function (e) {
    E.PreventDefault ();
    E.Stoppropagation ();
    this.Parentelement.classList.toggle ('show');
    this.NextElementssibling.classList.toggle ('show');
  });
});

Verwenden Sie alternativ HOVER, falls bevorzugt:

 .dropdown-Submenu: Hover> .dropdown-Menu {
  Anzeige: Block;
}

HINWEIS: Hover funktioniert möglicherweise nicht gut auf Berührungsgeräten.

V.

Stellen Sie sicher, dass Sie Bootstrap 5 CSS und JS einbeziehen:

 <link href = "https://cdn.jsdelivr.net/npm/bootstrap@3.2.2/dist/css/bootstrap.min.css" rel = "Stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@3.2/dist/js/bootstrap.bundle.min.js"> </script>

Wichtige Punkte, die sich erinnern sollten

• Verwenden Sie dropdown-submenu als benutzerdefinierte Klasse, um verschachtelte Elemente zu identifizieren.
• Positionieren Sie Untermenüs mit left: 100% um sie rechts vom Elternteil auszurichten.
• Verhindern Sie das Ereignisblasen mit stopPropagation() in JavaScript.
• Test auf Mobilgeräten-Mehrstufe Dropdowns können auf Touch-Geräten schwer zu bedienen sein.
• Betrachten Sie die Barrierefreiheit: Fügen Sie bei Bedarf aria-haspopup und aria-expanded Attribute dynamisch hinzu.

Grundsätzlich bietet Bootstrap Ihnen die Grundlage, aber verschachtelte Dropdowns benötigen ein wenig zusätzliches Aufschlag und Styling. Mit der richtigen Struktur und ein paar Änderungen können Sie eine reibungslose mehrstufige Dropdown-Down-Down-Stelle auf Geräten haben.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen mehrstufigen Dropdown in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!