ブートストラップドロップダウンを維持する方法チェックボックスリストを下に下げた

Question

私はかなり涼しいBootstrap Dropdown-checkboxを使用していますが、リストの上にボタンを置いてリストをドロップすると、リストをドロップしたままにしておきたいと思います。これは私が見た他のCheckBoxListコントロールと比較して優れています。

それがレンダリングするHTMLが隠されたリストで、基本的には次のとおりです。

<div id="agency-suburbs-list" class="suburbDropdownCheckbox dropdown-checkbox dropdown"> 
    <button class="dropdown-checkbox-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Suburbs List</button> 
    <div class="dropdown-checkbox-content"> 
     <ul class="dropdown-checkbox-menu"> 
      <li> 
       <div class="layout"> 
        <input type="checkbox" id="247908647965.94836"><label for="247908647965.94836">Alberante</label> 
       </div> 
      </li> 
      ... 
      <li> 
       <div class="layout"> 
        <input type="checkbox" id="882857971221.6206"><label for="882857971221.6206">Alrode</label> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

それがドロップダウンされたときにレンダリングされたものにそのHTMLを比較すると、唯一の違いは非常に外divは、余分なクラスを持っていますopen。コントロールのWebページに表示されるAPIには、JSを開くか閉じるためのJS機能が表示されず、クラスを手動で適用してもドロップダウンは開かれません。 me-openは、私がテスト用に追加されたコントロールのちょうど余分なボタンは独立して

$("#me-open").click(function(e) { 
     $("#agency-suburbs-list").addClass("open"); 
    }); 

。このコントロールに関する他のすべては完全に機能すると思われますので、ユーザーがselectの値を選択した後にリストを作成し、選択した値を表示するために別のボタンをクリックする必要があります悪いUX要因。

Answer 1

このドロップダウンチェックボックスはブートストラップモーダルです。ボタンを押すと表示されます。

あなたは常にそれを表示したい場合は、そのようないくつかのCSSを追加する必要があります：あなたはトグルボタンを非表示にする場合

.dropdown-checkbox-content { 
    display: block!important; /* or inline-block */ 
    position: static!important; 
} 

：

dropdown-checkbox-toggle { 
    display: none; 
}