Bootstrap Collapse komplexes Verhalten
Wie implementiere ich die Bootstrap 4-Minimierung in einer Hierarchie von Elementen (in meinem Fall navbars)
Ich habe die folgende Hierarchie auf einigen Elementen für meine Seite und ich möchte das Zusammenbruchverhalten in diesem "Baum" verwenden.
Speziell wünsche ich folgendes Verhalten
(was ich glaube, ist derjenige, der Sinn macht)
Grün bedeutet, dass die Navigationsleiste angezeigt wird, und Rot bedeutet, dass sie minimiert ist
Mit dem aktuellen Status
und klicken Sie auf Option B1
Das kollabiert einfach die Navigationsleiste B1
In einem anderen Beispiel, wenn Sie auf die Option A
klicken 
Dies zeigt Navbar A
und reduziert alle Nachkommen der Option B
(Navigationsleiste B und Navigationsleiste B1)
Die Regeln können auf 3 einfache Regeln reduziert werden:
1) Wenn Sie auf ein Element klicken, in dem einige Kinder (und möglicherweise andere Nachkommen) aktiv sind (und hier aktiv, ich meine), werden alle Kinder und Nachkommen zusammengebrochen.
2) Wenn Sie auf ein Element X klicken, das keine aktiven Kinder hat, dann zeigen Sie die (direkten) Kinder von X an und reduzieren Sie alle Nachkommen der Geschwister von X.
3) Alle Nachkommen des primären NAV werden kollabiert geladen
Ich konnte das gewünschte Verhalten mit benutzerdefiniertem JavaScript-Code erreichen und leider musste ich einige gewünschte Funktionalitäten ignorieren, die bereits vom Kollap-Plugin vom Bootstrap zur Verfügung gestellt wurden und sie nach meinen Bedürfnissen neu implementieren.
Gehen Sie hier zum Bootply
Hier ist der vereinfachte HTML-Teil
%Vor%Und hier ist das Javascript, das den Akkordeon-Stil neu implementiert, aber mit dem zusätzlichen Kollaps der Kinder der Geschwister
%Vor%Hinweis: Obwohl diese Lösung mein Problem löst, geschieht dies auf Kosten der Tatsache, dass Bootstrap bereits die Implementierung eines Akkordeons ignoriert und einige Datenattribute von einigen Links entfernt wurden, um Konflikte zwischen einigen automatischen Funktionen des Plugins mit meinem benutzerdefinierten Code zu vermeiden .
2 Antworten
Mein Ansatz beinhaltet die folgenden Updates:
1. Fügen Sie Ihren Links ein fehlendes Attribut hinzu ( <a> )
Fügen Sie den Menüverknüpfungen das Attribut data-toggle="collapse" hinzu. Dadurch erhalten Sie das erwartete Bootstrap-Verhalten für die Minimierung. Beispiel:
2. Fügen Sie eine sekundäre Klasse hinzu collapse-child
Damit können wir auf diese untergeordneten Navigationsleisten zugreifen. Beispiel:
%Vor%3. Das JavaScript
Das JavaScript kann dann auf das folgende Snippet vereinfacht werden:
%Vor%Ich bin mir nicht sicher, ob dies Ihre Anforderung "ohne benutzerdefiniertes JavaScript" erfüllt, aber ich würde es als "Best-Practice" -Methode ansehen, dies mit der aktuellsten Version von Bootstrap4 zu erreichen.
Ok, ich habe einen Weg gefunden, dies mit benutzerdefiniertem JavaScript-Code zu tun und einige der gewünschten Funktionalitäten zu ignorieren, die das Boot-Wrapper-Plugin zur Verfügung stellt und sie nach meinen Bedürfnissen neu zu implementieren.
Hier ist der vereinfachte HTML-Teil
%Vor%Und hier ist das Javascript, das den Akkordeon-Stil neu implementiert, aber mit dem zusätzlichen Kollaps der Kinder der Geschwister
%Vor%Hinweis: Obwohl diese Lösung mein Problem löst, geschieht dies auf Kosten der Tatsache, dass Bootstrap bereits die Implementierung eines Akkordeons ignoriert und einige Datenattribute von einigen Links entfernt wurden, um Konflikte zwischen einigen automatischen Funktionen des Plugins mit meinem benutzerdefinierten Code zu vermeiden .
Tags und Links jquery css twitter-bootstrap bootstrap-4