Close bootstrap dropdown only when mouse is clicked outside of dropdown

Question

I have a bootstrap dropdown menu:

<div class="dropdown>
   <a class="dropdown-toggle" href="#" id="menu1" data-toggle="dropdown"><img src="@imagePath" class="img-circle dropbtn" alt="Product" style="width:30px;height:30px;" /></a>

  <ul class="dropdown-menu" id="productDD" role="menu" aria-labelledby="menu1"></ul>
</div>

Now the ul load the products on page load through ajax call. The issue is when I click any product in the dropdown, the dropdown gets closed. But I want to close dropdown only when mouse is clicked anywhere outside of the ul

Possible duplicate of: https://stackoverflow.com/questions/25089297/avoid-dropdown-menu-close-on-click-inside — wholevinski, Sep 04 '18 at 12:37

Matt Dietsche · Answer 1 · 2018-09-04T19:43:18.913

2

Try something like this:

$(document).click(function(e) {
  // get the clicked element
  $clicked = $(e.currentTarget);
  // if the clicked element is not a descendent of the dropdown
  if ($clicked.closest('.dropdown').length === 0) {
    // close the dropdown
    $('.dropdown').removeClass('open');
  }
});

edited Sep 04 '18 at 19:43

answered Sep 04 '18 at 15:11

Matt Dietsche

578
5
17

score 2 · Answer 2 · answered Jan 27 '22 at 17:11

2

Bootstrap has a built-in solution

<a class="dropdown-toggle" href="#" id="menu1" data-toggle="dropdown" data-bs-auto-close="outside"><img ... /></a>

answered Jan 27 '22 at 17:11

yih613

239
1
10

score 1 · Answer 3 · answered Mar 21 '21 at 12:20

In 2021 you do it this way:

$('.dropdown').on({
    "shown.bs.dropdown": function() { /* whatever you want to do when it fires */ },
    "click":             function(e) { // handles click event
      
       console.log(e.target) // just to check which element is on top

      if($('.dropdown-menu').is(e.target)) { // if dropdown is clicked
        this.closable = false // do not close it
        return;
      } else {
        this.closable=true; // else close it 
      }

    },
    "hide.bs.dropdown":  function() { return this.closable; } // save state
  });
}

score 0 · Answer 4 · answered Sep 04 '18 at 12:25

0

just place this script in your code

<script>
    $(document).click(function() {
    $(".dropdown").removeClass('open');
});
</script>

answered Sep 04 '18 at 12:25

Girish Ninama

583
4
8

thanks for the answer but it didn't work unfortunately. I don't want to close dropdown when mouse is clicked inside of a ul "productDD" – Ask Sep 04 '18 at 12:30
Maybe try to use `blur` event? As said [here](https://api.jquery.com/blur/) `The blur event is sent to an element when it loses focus. (...) In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.` – Jacek Rosłan Sep 04 '18 at 12:39

Close bootstrap dropdown only when mouse is clicked outside of dropdown

4 Answers4