Bootstrap - So halten Sie das Dropdown-Menü geöffnet, wenn das Untermenü geöffnet ist

Question

Ich habe Schwierigkeiten, mein Dropdown-Menü zu öffnen, wenn ich auf ein Untermenü klicke. Sie würden denken, dass Bootstrap das direkt aus der Box tun würde. Aber ich kann keine Dokumentation darüber finden.

hier ist, was ich als eine Lösung gefunden: https://www.bootply.com/rgvY6oPO1J

In meinem HTML ich habe dies:

<div class="btn-group" id="myDropdown"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
    Menu 
    <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Choice1</a></li> 
    <li><a href="#">Choice2</a></li> 
    <li><a href="#" id="btn-mynumbers" data-toggle="collapse" data-target="#mynumbers" aria-expanded="false">Numbers</a> 
     <ul class="nav collapse" id="mynumbers" role="menu" aria-labelledby="btn-mynumbers"> 
     <li><a href="">1</a></li> 
     <li><a href="">2</a></li> 
     <li><a href="">3</a></li> 
     <li><a href="">4</a></li> 
     <li><a href="">5</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Choice3</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Choice..</a></li> 
    </ul> 
</div> 

Und hier ist, was in meinem JavaScript:

$("#btn-mynumbers").on("click", function (e) { 
    e.stopPropagation(); 
    $("#mynumbers").slideToggle("fast"); 
}); 

für die das meiste funktioniert. Aber ich werde viele Menüpunkte haben, und ich möchte nicht für jedes von mir erstellte Untermenü einen On-Click-Anrufer erstellen.

Also habe ich versucht,

Onclick = setzen "Toggle (this);"

in

id = "BTN-mynumbers"

und die Schaffung der Funktion:

function Toggle(element) { 
    event.stopPropagation(); 
    var parentid = element.id; 
    var childid = $(parentid).children("ul").attr("id"); 
    $(childid).slideToggle("fast"); 

} 

, so kann ich jedes Untermenü geben Sie auf die Fähigkeit, offen bleiben. aber das Ereignis stoppte die ALL-Propagierung, sogar das SlideToggle. Ich weiß nicht, wie ich das Drop-Down-Fenster offen halten kann, wenn ein Untermenü heruntergleitet.

Answer 1

Es scheint, als ob ein Fehler mit der von Ihnen vorgenommenen Funktion aufgetreten ist, da event wahrscheinlich undefiniert wäre. Ich habe es in etwas wie unten geändert. Aber Sie können es in Aktion mit dem Code-Link unten sehen.

$(".submenu").on("click", function (event) { 
    event.stopPropagation(); 
    var target = event.currentTarget; 
    $(target).siblings('ul').slideToggle("fast"); 
}); 

Der beste Ansatz, wenn Sie mit den Klassen keine ID für jeden möglichen Menüpunkt setzen mögen, das ein Untermenü hat, dann arbeiten. Auf diese Weise müssen Sie nicht neu codieren.

Ich machte Sie eine codepen, die zeigt, wie Klassen anstelle von IDs als Bezeichner verwenden. Ich habe ein Beispiel für einen anderen Menüpunkt mit einem Untermenü hinzugefügt, mit dem Sie herumspielen können.

Hoffe, dass hilft!