Wie fügt man ein einzelnes Dropdown-Menü an Body in Bootstrap an

8

Ich habe die Dokumentation für das Dropdown-Menü als Komponente und separat mit JavaScript .

Ich frage mich, ob es möglich ist, ein einzelnes Dropdown-Menü im Körper der Website hinzuzufügen (absolut positioniert relativ zu dem anklickbaren Schaltflächenelement).

Warum?

  • Wenn ich eine Tabelle mit 500 Zeilen habe, möchte ich die gleiche Liste von 10 Elementen nicht 500 Mal hinzufügen, wodurch das resultierende HTML beim Umgang mit JS größer und langsamer wird.

  • Da das übergeordnete Element ausgeblendet werden kann, das Dropdown-Menü jedoch weiterhin sichtbar bleiben soll, bis es außerhalb der Gruppe klickt, wird es nicht fokussiert.

Ich habe mehr Leute gefunden , die nach dieser Funktion fragen , aber ich konnte in den Dokumenten nichts finden es.

    
Alvaro 24.06.2015, 14:26
quelle

1 Antwort

14

Wie die Bootstrap-Dokumente sagen, gibt es keine Optionen für Dropdown-Menüs ... Das ist traurig, aber es ist bedeutet, dass derzeit keine Bootstrap-Lösung für die gewünschte Funktionalität verfügbar ist. Es gibt jetzt jedoch eine Lösung im Kit Angular-UI / Bootstrap , wenn Sie diese verwenden. Das Ticket, auf das Sie verwiesen haben, ist geschlossen, da es ab dem 15. Juli 2015 zur Angular-UI hinzugefügt wurde .

Alles, was Sie tun müssen, ist 'Drop-Down-Append-to-Body' zum Drop-Down-Element hinzufügen, um es an das innere Dropdown-Menü an den Body anzuhängen. Dies ist nützlich, wenn sich der Dropdown-Schalter innerhalb eines div mit Überlauf befindet: versteckt, und das Menü sonst verborgen wäre. (Referenz)

%Vor%

Hoffe, das hilft!

BEARBEITEN

Um eine weitere SO-Frage zu beantworten, habe ich eine Lösung gefunden, die ziemlich gut funktioniert, wenn Sie nicht Angular-UI verwenden. Es kann "hacky" sein, aber es bricht die Bootstrap-Menüfunktionalität nicht, und es scheint gut mit den meisten Anwendungsfällen zu funktionieren, für die ich es verwendet habe.

Ich werde also ein paar Geigen lassen, falls das jemand sieht und interessiert ist. Der erste zeigt, warum die Verwendung eines an den Körper angehängten Menüs nett sein kann, der zweite zeigt die funktionierende Lösung:

Problem FIDDLE

Das Problem: Ein Dropdown-Menü innerhalb eines Panel-Hauptteils

%Vor%

Lösungsfiddle

%Vor%

BEARBEITEN Ich habe endlich gefunden, wo ich diese Lösung ursprünglich gefunden habe. Muss eine Gutschrift geben, wo Guthaben fällig ist!

    
Jonathan 11.09.2015 16:28
quelle