ボタンをクリックするまで、ドロップダウンブートストラップを表示する方法

Question

私はブートストラップからドロップダウン機能を使用しています。ボタンをクリックするまでメニューが表示されるようにしたい。それはスイッチのように見える必要があります。リストを見たい場合は、ボタンをクリックして、それを隠す必要があります。リストボタンの外側と内側をクリックしてもまだ開いています。

<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 useこれでも、内側のリストをクリックするとリストが非表示になります。ここで

Answer 1

はauthor

によって示唆されているように、ブートストラップがhide dropdownに別のコールでhide dropdownに失敗した場合に解決

Fiddle

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

Clickイベントが送信されていますちょうどあなたのタラにこれを加えてくださいe