Prevent Bootstrap dropdown menu toggle on click

Question

This was asked quite a few times before, but I can't find a proper solution yet. I am toggling navbar dropdown menus on hover with the following code:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

which works just fine. However, clicking on the .dropdown-toggle button toggles the menu as well, which I want to avoid. Any suggestions on the code?

$('.dropdown-toggle').on('click',function(e){ e.preventDefault()}); — Guruprasad J Rao
– Guruprasad J Rao, Commented Sep 23, 2015 at 9:42

Skeets · Accepted Answer · 2019-08-29 09:12:07Z

2

Just stop the propagation here:

$('.dropdown-toggle').click(function(event){
     event.stopPropagation();
 });

edited Aug 29, 2019 at 9:12

Skeets

4,8983 gold badges50 silver badges77 bronze badges

answered Sep 23, 2015 at 10:07

Nagesh Sanika

1,1001 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Skeets Over a year ago

In bootstrap 4, the dropdown event is tied directly to the .dropdown-toggle div, so this unfortunately doesn't work.

Collectives™ on Stack Overflow

Prevent Bootstrap dropdown menu toggle on click

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related