Avoid dropdown menu close on click inside

A

40

395

I have a Twitter Bootstrap dropdown menu. As all Twitter Bootstrap users know, the dropdown menu closes on click (even clicking inside it).

To avoid this, I can easily attach a click event handler on the dropdown menu and simply add the famous event.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 looks easy and a very common behavior, however, and since carousel-controls (as well as carousel indicators) event handlers are delegated to the document object, the click event on these elements (prev/next controls, ...) 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();
});

Relying on Twitter Bootstrap dropdown hide/hidden events is not a solution for the following reasons:

The provided event object for both event handlers does not give reference to the clicked element
I don't have control over the dropdown menu content so adding a flag class or attribute is not possible

This fiddle is the normal behavior and this fiddle is with event.stopPropagation() added.

Update

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

Afflux answered 1/8, 2014 at 21:59 Comment(4)

1. Your jsfiddle is not working. 2. What exactly you want to achieve? – Pinchas 7/8, 2014 at 13:22

@paulalexandru, Updated, added two fiddle. One default behavior, and one with modification. Try clicking on the next & previous button, or on indicators. For the first example, the menu hides & the carousel slides. or the second example : The menu stays open, but the carousel didn't slide since the event propagation has been stopped. – Afflux 7/8, 2014 at 14:25

@Pinchas Got it, Right? – Afflux 7/8, 2014 at 20:8

@php-dev: i have updated it again for sake of challenge, now it is perfect... see the demo. – Nyssa 12/8, 2014 at 8:50

L

420

Removing the data attribute data-toggle="dropdown" and implementing the open/close of the dropdown can be a solution.

First by handling the click on the link to open/close the dropdown like this :

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

and then listening the clicks outside of the dropdown to close it like this :

$('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 is the demo : http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

Lux answered 8/8, 2014 at 4:32 Comment(18)

This solution is working fine. The bounty should be awarded to you if there is no other answer. – Afflux 8/8, 2014 at 6:55

You seem also to be the only one who understood the situation/requirement :) – Afflux 8/8, 2014 at 6:59

Your solution is working, generic and also "popular". The bounty should be awarded to your answer. I also found an answer, look at it below ;) – Afflux 11/8, 2014 at 22:1

Just a tiny update: $('a.dropdown-toggle:not([data-toggle])').on('click', function (e) { var a = $(e.delegateTarget); var li = a.parent(); li.parent().find('.open').removeClass('open'); li.addClass('open'); }); – Sangsanger 15/3, 2015 at 13:3

and what with multi-item in primary navigation ? e.g. jsfiddle.net/cichy380/hh81rhcm/61 (if you click Menu item 1 and after Menu item 2) – Demeter 20/4, 2015 at 9:28

@Cichy...just modify the first handler like this...$('li.dropdown.mega-dropdown a').on('click', function (event) { $('li.dropdown.mega-dropdown.open').removeClass('open'); $(this).parent().toggleClass('open'); }); – Maldon 30/6, 2015 at 21:30

$(this).parent().toggleClass('open'); didn't work for me, I used this instead $(this).parents('.btn-group').toggleClass('open'); – Mcquoid 24/7, 2015 at 23:7

This preferred answer is a hack. wow!!! Here is a simpler BOOTSTRAP 4 ALPHA answer to prevent inside click in a mega-dropdown. // PREVENT INSIDE CLICK DROPDOWN

$('.dropdown-menu').on("click.bs.dropdown", function (e) {                 e.stopPropagation();                 e.preventDefault();                             });

– Pyne 29/3, 2016 at 4:4

@FrankThoeny your example works fine in Bootstrap 3 too, had similar issue and works perfectly fine. "Roma" you could add this to the answer as well. Easier and cleaner. ex: attach a class to links and then do $('.LINK_CLASS').on('click', function(e) { e.stopPropagation() }); – Midterm 25/9, 2016 at 23:13

This one didn't work for me so I published my own answer down the page which fixed the problem without bringing any side problem. – Tollman 27/9, 2017 at 20:2

e.stopPropagation() is the best solution. – Postdate 29/3, 2018 at 11:19

can you please help me to fix this #51553212 @Lux – Natatorial 27/7, 2018 at 8:40

You need to add " mega-dropdown " class to that li you removed the data-toggle="dropdown". in order for it to work – Trifolium 11/10, 2018 at 9:6

This solution does not respect aria-expended attribute. – Exertion 21/6, 2019 at 16:18

Thanks, @nacholibre - your comment works for me with just adding stopPropagation – Boggs 10/12, 2019 at 6:56

For bootstrap 5 change data-toggle attrib to data-bs-toggle and use code like this $("#idOfDropdown").dropdown('toggle'); – Extroversion 17/8, 2022 at 16:46

@FrankThoeny Please read carefully the requirement! I don't need the dropdown to close, but I need other behavious to keep working (such as carousel slides, tabs navigation, ... whatever ) – Afflux 25/8, 2022 at 18:48

Just to add a minor improvement: use document.addEventListener('click', function(e) {...}, true) to fire the listener during the capturing phase. I noticed that if there are two dropdown buttons, clicking on another dropdown button does not close the current dropdown without setting useCapture to true, possibly because the default dropdown toggle stops event propagation. – Acanthocephalan 18/12, 2023 at 22:26

H

449

This should help as well

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

Hitandmiss answered 3/10, 2015 at 12:44 Comment(10)

That's the most common solution, but I have a different requirement. Please carefully read my question :) – Afflux 23/2, 2016 at 11:56

@HaBa-Media I've even talked about this solution in my question second line. – Afflux 25/7, 2016 at 9:56

This should definitely be the accepted answer. Cleaner, shorter and doesn't disable normal link behaviour which other answers do – Crush 16/2, 2018 at 14:54

simple, elegant and pretty usefull. Just saved me lots of time exploring bootstrap javascript/elements graph. Thanks a lot. – Thallus 8/11, 2018 at 1:31

This will not work if the 'click' event is supposed to trigger further JS actions. The dropdown will not close yes, but all the other events triggered by the click event won't fire anymore. – Splenitis 18/6, 2019 at 5:23

Best solution indeed. I personally used '.dropdown-menu :not(.dropdown-item)' so that clicking on a dropdown-item does close the popup, but clicking on a dropdown-header does not. – Exscind 18/7, 2019 at 9:10

Everyone needs to stop saying this is the best solution, IT IS NOT. The OP addressed this in the question and correctly does not want to use this solution, so this does not answer OP's question. This is begging for a future bug that can be very difficult to debug. Let's say a future dev comes along and attaches a click handler to this menu. The handler will never fire, because this solution has stopped propagation. The future dev will go crazy trying to understand why this isn't working. Just because code works doesn't mean it's right or the best way. – Madalynmadam 26/5, 2020 at 4:10

/**with querySelectorAll => */ document.querySelectorAll('.dropdown-menu').forEach(function (el){ el.addEventListener('click', function (ev) { ev.stopPropagation() }) }) – Antevert 19/3, 2022 at 19:38

Problems appear, if you have checkboxes inside. – Veator 4/10, 2022 at 10:40

if you are using bootstrap 5 then it's very easy getbootstrap.com/docs/5.0/components/dropdowns/… – Localism 13/1, 2023 at 7:4

L

420

Removing the data attribute data-toggle="dropdown" and implementing the open/close of the dropdown can be a solution.

First by handling the click on the link to open/close the dropdown like this :

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

and then listening the clicks outside of the dropdown to close it like this :

$('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');
    }
});