Dropdown menus should not close when clicked inside.

Problem

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>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <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>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
            </div>
          </div>
          <a data-slide="prev" role="button" href="#carousel" 
             class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a data-slide="next" role="button" href="#carousel" 
             class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

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
    event.stopPropagation();
});

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) {
  e.stopPropagation();
});

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) {
    $(this).parent().toggleClass('open');
});

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

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

Here’s how it works: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

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">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>

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 
hide.bs.dropdown | 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('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
    }else{
        return true;
    }
});

Answered by Vartan

Solution #5

This might help:

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})

Answered by Bawantha

Post is based on https://stackoverflow.com/questions/25089297/avoid-dropdown-menu-close-on-click-inside