Avoid dropdown menu close on click inside

Bootstrap and automatic dropdown closure

Bootstrap has provided a simple solution to this issue. Utilize the data-bs-auto-close="false" attribute on your dropdown definition. This will halt automatic closure of the menu, giving you full control over when it closes.

<div class="dropdown">
  <button id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <!-- Dropdown content secret stash -->
  </div>
</div>


To close the dropdown manually, simply toggle the show class on the .dropdown-menu using jQuery.

$('.dropdown-menu').removeClass('show');  // Now you see it, now you don't!


Handling interactive elements inside dropdown

You fancy, huh? Having interactive elements like forms, toggles, or carousels inside dropdowns! But don't worry, with a good event handling, you can have your cake and eat it too. First up, bind event listeners to the specific form or interactive bits within the dropdown:

$(document).on('submit', '.your-form-class', function(e) {
  //Your crime scene here...
  e.preventDefault(); //Naah, not today form. You ain't submitting.
});


You can also override Bootstrap's default hide behavior. Just return false in hide.bs.dropdown event, which will prevent the dropdown from closing:

$('.dropdown').on('hide.bs.dropdown', function(e) {
  return false; //Nothing to see here. Move along.
});


And let's not forget our friend, the <form> tag, wrap your interactive dropdown elements inside this and you're golden!

Solidifying your CSS game

Got some sneaky CSS breaking your dropdown? Ensure that your dropdown content ain't leaking out of your .dropdown-menu. Check your CSS to make sure elements within the dropdown are retaining the necessary bounds.

Building your custom dropdown

Need more granular control? You may want to build your very own custom dropdown behavior:

$('.dropdown-link').on('click', function(e) {
  e.preventDefault();
  $(this).parent('.dropdown').toggleClass('open'); //Look at me! Now I'm a door. I'm OPEN.
});


Remember to add the .open class to your CSS, so the dropdown knows when to show and when to hide:

.dropdown.open .dropdown-menu {
  display: block; //Show-off time!
}


And don't forget, when binding click events, use .on() with a selector if you want to target specific bits:

$(document).on('click', '.dropdown-container', function(e) {
  //Clicky clicky, dropdown sticky.
});


Here's how you check DOM conditions and maintain that dropdown open:

$(document).on('click', function(e) {
  if( !$(e.target).closest('.mega-dropdown').length ) {
    $('.mega-dropdown').removeClass('open'); //I'm a dropdown not a door. I'm closed.
  }
});


Advanced interactions with complex dropdowns

Now, for the advanced stuff. e.clickEvent.target or e.relatedTarget can help you dive deep and tackle complex interactions:

$('.dropdown-menu').on('click', '.keepopen', function(e) {
  e.stopPropagation();  //I stay open. I don't care about your clicks.
});


Target specific dropdowns if you need to differentiate between different dropdowns on your page:

$('li.dropdown.mega-dropdown').on('click', function(e) {
  //Nothing special. Just some Mega-dropdown things.
});
