GreggMoore GreggMoore - 1 month ago 11
Javascript Question

Bootstrap keep menu open on outside click

I've exhausted most of the options I found here on Stack... I've created a full width (horizontal) dropdown menu using Bootstrap 3. The nav contains multiple dropdowns within itself and they are activated (displayed) by the mouseenter event:

$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});


I've tried disabling the "outside" click by using:

$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});


which works, however, it also disables the "mouseenter" event.... How can I resolve this issue? Any feedback would be great! Thanks!

Answer

you meant like this? http://codepen.io/saeedsalam/full/ZpgzQv/

i have added following code in addition with yours -

$(document).on('click','.dropdown.open a', function(){
  $(this).parent().removeClass('open');
});

hope that helps!