Iman Tumorang Iman Tumorang - 1 month ago 10
CSS Question

How keep dropdown bootstrap visible until click back the button

I'm using dropdown feature from bootstrap. I want the menu still visible until I click back the button back. It must look like a switch . If we want to see the list, we must click the button, and also to hide it back. And it still open although we click in the outside and in the inside of the list button .

<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>

<div class="dropdown keep-open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#"
data-toggle="dropdown" data-target="#"
class="btn btn-primary">
Dropdown <span class="caret"></span>
</button>

<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu"
aria-labelledby="dLabel">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>




I need to open and to close the dropdown menu , only from the button.

I use this, but still it hide the list when i click in the inside list.

Answer

Here is the solution

Fiddle

$('.keep-open #dLabel').on({
  "click": function() {
    $(this).parent().attr('closable', true );
  }
})

Click event is sent when the bootstrap is failed on hide dropdown with another call to hide dropdown as suggested by author

Just add this to your code