Coder Perfect

Dropdown menus should not close when clicked inside.


I’ve created a dropdown menu using Twitter Bootstrap. The dropdown menu closes on click, as all Twitter Bootstrap users are aware (even clicking inside it).

To avoid this, I can just add the famous event to a click event handler on the dropdown menu. stopPropagation().

<ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    <ul class="dropdown-menu mega-dropdown-menu">
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
          <a data-slide="prev" role="button" href="#carousel" 
             class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          <a data-slide="next" role="button" href="#carousel" 
             class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>

This appears to be a simple and usual practice, however because the event handlers for carousel-controls (as well as carousel indicators) are delegated to the document object, the click event on these elements (prev/next controls, etc.) will be “ignored.”

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired

For the following reasons, relying on Twitter Bootstrap dropdown hide/hidden events is not a viable solution:

This violin represents typical conduct, while this fiddle represents an event. The function stopPropagation() has been added.

Thanks to Roman for his answer. I also found an answer that you can find below.

Asked by php-dev

Solution #1

This should also help.

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {

Answered by Arbejdsglæde

Solution #2

A solution could be to remove the data attribute data-toggle=”dropdown” and implement the open/close of the dropdown.

To begin, handle the link click to open/close the menu as follows:

$('li.dropdown.mega-dropdown a').on('click', function (event) {

and then closing it by listening to the clicks outside the dropdown:

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is( 
        && $('li.dropdown.mega-dropdown').has( === 0 
        && $('.open').has( === 0
    ) {

Here’s how it works:

Answered by Roma

Solution #3

The best solution is to add a form tag after the dropdown-menu class.

as a result, your code

<ul class="dropdown-menu">
      <div class="menu-item">bla bla bla</div>

Answered by Gregory Bowers

Solution #4

The following are some of the features provided by Bootstrap:

                 | This event is fired immediately when the hide instance method | has been called. The toggling anchor element is available as the 
                 | relatedTarget property of the event.

As a result, by using this function, you should be able to prevent the dropdown from closing.

$('#myDropdown').on('', function (e) {
    var target = $(;
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
        return true;

Answered by Vartan

Solution #5

This might help:


Answered by Bawantha

Post is based on