7

Avoid dropdown closing by clicking outside.Show and hide dropdown while clicking only on button. Heres the fiddle. 

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
MrMaavin
  • 1,611
  • 2
  • 19
  • 30

2 Answers2

13

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Any way to make it close when you click a menu item? OP didn't specify, but could be useful. – showdev Mar 12 '19 at 12:27
  • I'm sure there is, but I didn't provide that answer since OP said *"Show and hide dropdown while clicking only on button"*. I will update the answer with another option. – Carol Skelly Mar 12 '19 at 12:28
  • Why I cant able to achieve it in this https://jsfiddle.net/Ld46q0za/1/ @Zim –  Mar 13 '19 at 07:56
  • This is incorrect, hide.bs.dropdown does not have clickEvent property – Sam Axe Nov 22 '19 at 02:07
  • Yes, it does have a clickEvent property [as explained in the docs](https://getbootstrap.com/docs/4.3/components/dropdowns/#events), but "only when the original event type is click" – Carol Skelly Nov 22 '19 at 03:04
0

I think you just need to make your own menu-toggling click event instead of using the one bootstrap provides and then attempting to override things

Bootstrap 3

var $ddlBtn = $("#my-custom-ddl");
$ddlBtn.on("click", function(){
  var expanded = /true/i.test($ddlBtn.attr("aria-expanded"));
  $ddlBtn
    .attr("aria-expanded", !expanded)
    .parent().toggleClass("open");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="my-custom-ddl" aria-haspopup="true" aria-expanded="false">
    Dropdown Example
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Bootstrap 4

var $ddlBtn = $("#my-custom-ddl");
$ddlBtn.on("click", function(){
  var expanded = /true/i.test($ddlBtn.attr("aria-expanded"));
  $ddlBtn
    .attr("aria-expanded", !expanded)
    .siblings(".dropdown-menu").toggleClass("show")
    .parent().toggleClass("show");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="my-custom-ddl" aria-haspopup="true" aria-expanded="false">
    Dropdown Example
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="my-custom-ddl">
    <a class="dropdown-item" href="#">HTML</a>
    <a class="dropdown-item" href="#">CSS</a>
    <a class="dropdown-item" href="#">Javascript</a>
  </div>
</div>
Chris Barr
  • 29,851
  • 23
  • 95
  • 135