Avoid having to double-click to toggle Bootstrap dropdown

I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down...

Is there any way to fix that?

If someone is using angular with ui-bootstrap module along with normal bootstrap HTML dropdown definition, there are also two clicks needed.

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   [...]
</li>

=> Removing the data-toggle="dropdown" will fix the issue.

Opening the dropdown with one click will work after this.

Reference: https://github.com/angular-ui/bootstrap/issues/2294

In Bootstrap 4, bootstrap.min.js and bootstrap.bundle.min.js now conflict in dropdown.

By removing bootstrap.min.js, the dropdown double click issue will resolved.

This may happen if somehow Bootstrap is included twice in your project.

If bootstrap.min.js and bootstrap.bundle.min.js(bootstrap and popper js) both included in project, it means redundant bootstrap js.

The js combination should be like this: Either : bootstrap.bundle.min.js only Or : bootstrap.min.js AND popper.min.js For detailed information, visit https://getbootstrap.com/docs/4.1/getting-started/contents/

In BootStrap 4, One should not include both "bootstrap.bundle.min.js" and "bootstrap.min.js". This will cause the DropDown issue. Only Keep "bootstrap.bundle.min.js" as it will have all required code.

This happens because the Twitter Bootstrap syntax for their drop downs include a href tag. You will need to preventDefault and stopPropagation to prevent this from happening. Something like this will do the trick:

$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});