Bootstrap Dropdown Closing When Clicked

Avoid dropdown menu close on click inside

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/

Prevent dropdown from closing if click is happening inside the dropdown menu

I updated your HTML file (see below) so that the event.stopPropagation() method is called directly once the user clicks on the dropdown. Seems to be working, I found the answer here: How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)

The openDropdown() method can be removed from the ts file. Hope this helps!

<div class="container">  <div>    <div class="btn-group" dropdown>      <div  dropdownToggle id="pencilColorPicker">          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png">       </div>
      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()"          role="menu" aria-labelledby="button-basic">        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>            </ul>    </div>  </div>
  <div>    <div class="btn-group" dropdown>      <div  dropdownToggle id="pencilColorPicker">          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png">       </div>
      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()"          role="menu" aria-labelledby="button-basic">        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>            </ul>    </div>  </div>
</div>

How do I prevent my dropdown from closing when clicking inside it?

'.dropdown-menu' catches the the bubble. There is no need to catch elements inside of the dropdown in this case.

e.stopPropagation() prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

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

Avoid dropdown close on clicking outside

Bootstrap 4 Dropdown eventing is slightly different than Bootstrap 3, therefore the suggested duplicates (and here) will not work to prevent the dropdown from closing on an outside click.

For Bootstrap 4, look for the clickEvent, and when found in the hide event, prevent the default close behavior. This dropdown will only close when the button is clicked.

$('#myDD').on('hide.bs.dropdown', function (e) {
    if (e.clickEvent) {
      e.preventDefault();
    }
})

Demo

---

In some cases, you may want the Dropdown to close when the button or menu is clicked. In this case you can examine the clickEvent target. For example, look for the 'nav-link' class.

$('#myDD').on('hide.bs.dropdown', function (e) {
    if (e.clickEvent && e.clickEvent.target.className!="nav-link") {
      e.preventDefault();
    }
});

Demo 2

Close Bootstrap Dropdown after link click

Give your links a class (e.g. download):

<a href="#" class="download" data-bind="disable: noResults()....

And your dropdown an id (e.g. dlDropDown):

<button class="btn dropdown-toggle" id="dlDropDown" data-toggle="dropdown" data-bind="enable: !noResults()">

And then add the following event handler:

$("a.download").click(function() {
   $("#dlDropDown").dropdown("toggle");
});

Prevent Bootstrap dropdown from closing on clicks

You need to stop event from bubbling up the DOM tree:

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.

Demo: http://jsfiddle.net/wkc5md23/3/

Bootstrap dropdown closing when clicked

Simply use this example.This solution works for me.

<script type="text/javascript">
window.addEvent('domready',function() {    
   Element.prototype.hide = function() {
      $(function () { 
        // replace your tab id with myTab
        //<ul id="myTab" class="nav nav-tabs">
        $('#myTab li:eq(1) a').tab('show');
      });      
   };
});
</script>

Hope it'll help. Thanks.

---

Related Topics