Bootstrap dropdown - off disappear after click

Question

How can I prevent the dropdown from disappearing when I click on the body or navbar?

Here's my current HTML:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" 
         data-toggle="dropdown" role="button" aria-expanded="false">
           Dropdown <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
</div>

score 2 · Answer 1 · edited May 17 '18 at 19:19

2

Here's KyleMit's solution from Keep Bootstrap Dropdown Open When Clicked Off:

//Attaching event handler to .dropdown selector.
$('.dropdown').on({

    //fires after dropdown is shown instance method is called (if you click anywhere else)
    "shown.bs.dropdown": function() { this.close= false; },

    //when dropdown is clicked 
    "click": function() { this.close= true; },

    //when close event is triggered
    "hide.bs.dropdown":  function() { return this.close; }
});

edited May 17 '18 at 19:19

KyleMit

30,350
66
462
664

answered Nov 09 '16 at 21:36

Saa_keetin

647
6
10

should i create custom script.js file yes? – Giacomo Nov 09 '16 at 21:43
you would need to include jquery first and yes if you prefere you can add custom js file or add this into the html file with a script tag. But ensure you have jquery dependecy taken care of. . – Saa_keetin Nov 09 '16 at 21:46
lol never mind its bootstrap , i am sure you already have jquery linked :) – Saa_keetin Nov 09 '16 at 21:47
Very good :) it is going good. Thank you so much. :* – Giacomo Nov 09 '16 at 22:00
you are welcome ;) – Saa_keetin Nov 09 '16 at 22:01
I have one more question. How can i do "open dropdown" when start website?? – Giacomo Nov 09 '16 at 22:02
1

you can just add open class to your dropdown class. under $( document ).ready(function() { (".dropdown").addClass("open"); }); – Saa_keetin Nov 09 '16 at 22:17
This would add the open class when the document loads for the first time. – Saa_keetin Nov 09 '16 at 22:18

Bootstrap dropdown - off disappear after click

1 Answers1