Bootstrap 4 Nav Dropdown Problem, wenn mehr als ein Drop-Down-

Question

jsfiddle: http://jsbin.com/wamunoside/1/edit?html,output

jsfiddle 

Dieser aus dem Beispiel auf der Bootstrap 4 docs Website gegeben genommen wird: nur ein zweites Dropdown dieses Beispiel unter dem ersten Dropdown-Zugabe finden Sie hier: https://v4-alpha.getbootstrap.com/components/navbar/#navbarNavDropdown

dies also im jsfiddle ist, wie Sie das Problem verursachen:

1.) die Breite der Ausgabe Registerkarte reduzieren, so dass es das Menü zeigt fo r mobil (991px oder weniger)

2.) Sie sehen zwei 'Dropdown-Link', klicken Sie auf den oberen, der das Untermenü erweitert.

3.) Klicken Sie auf den anderen 'Dropdown-Link' unter dem aktuell erweiterten.

Beachten Sie, dass beide Dropdown-Listen jetzt geschlossen sind - sollte das 2. Dropdown-Menü geöffnet haben.

Answer 1

endete Ausgabe meinen Code zu sein ... Ich fügte hinzu, die folgende wenn event.type == "mouseleave" und das scheint recht gut das Problem behoben zu haben, immer noch nicht perfekt (für Desktop):

http://jsbin.com/yiyohatequ/edit?html,css,js,output

I‘ M kämpft im Grunde mit dem besten Weg, Drop-Down-Menü zu erscheinen 'auf Hover' für Desktop-und Drop-Down zu erscheinen 'auf klicken' für Tablet/Handy. Deshalb habe ich diesen Code an erster Stelle geschrieben.

/* Prevent more than 1 dropdown showing up at once*/ 
$('.nav-link').hover(function (event) { 
//breaks mobile if this fires on "mouseenter". so only fire on "mouseleave" 
if (event.type == "mouseleave") { 
    var hovered = this.nextElementSibling;//.dropdown-menu 
    var navdropdowns = $('.dropdown-menu'); 
    navdropdowns.each(function (a, b) { 
     if (hovered != b) { 
      $(b).removeClass('show'); 
     } 
    }); 
} 
})