keep dropdown-menu open with bootstrap jplist filters ?

[gh2b]

Hi, I work with jPlist plugins and with Bootstrap. I made a dropdown with checkbox filters using data-control-type="boot-filter-drop-down". Fonctionnalities are ok when i click on my button but just with "hover" event… I try to find a solution to keep the dropdown-menu open after a click on the button, and be close when i click in an other button placed inside my dropdown-menu. I try different solution found on web but nothing… it's always the same issue : hover but not click. Is jPlist Bootsrap filter plugin force it ? Could you help me find an issue ?

see my dropdown code :

`

Plus de filtres

                <div class="dropdown-menu row pleine-largeur-filtrage" role="menu" aria-labelledby="dropdown-filtres">
                    <div class="jplist-group" data-control-type="checkbox-text-filter" data-control-action="filter" data-control-name="check-filtres" data-path=".keywords" data-logic="and">
                        <ul class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <li class="title-check"><h4>Marques</h4></li>
                        <li><input value="classique" id="classique" type="checkbox" />
                        <label for="classique">Les grands classiques (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".classique" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="marque1" id="marque1" type="checkbox" />
                        <label for="marque1">Marque 1 ( <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".marque1" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="marque2" id="marque2" type="checkbox" />
                        <label for="marque2">Marque 2 ( <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".marque2" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="marque3" id="marque3" type="checkbox" />
                        <label for="marque3">Marque 3 ( <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".marque3" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="marque4" id="marque4" type="checkbox" />
                        <label for="marque4">Marque 4 ( <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".marque4" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    </ul>
                    <ul class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
                        <li class="title-check"><h4>Genre</h4></li>
                        <li><input value="ado-junior" id="ado-junior" type="checkbox" />
                        <label for="ado-junior">Ado / Junior (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".ado-junior" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="femme" id="femme" type="checkbox" />
                        <label for="femme">Femme (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".femme" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="homme" id="homme" type="checkbox" />
                        <label for="homme">Homme (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".homme" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    </ul>
                    <ul class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
                        <li class="title-check"><h4>Forme</h4></li>
                        <li><input value="rectangle" id="rectangle" type="checkbox" />
                        <label for="rectangle">Rectangle (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".rectangle" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="ovale" id="ovale" type="checkbox" />
                        <label for="ovale">Ovale (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".ovale" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="octogonale" id="octogonale" type="checkbox" />
                        <label for="octogonale">Octogonale (    <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".octogonale" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    </ul>
                    <ul class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
                        <li class="title-check"><h4>Montage</h4></li>
                        <li><input value="traditionnel" id="traditionnel" type="checkbox" />
                        <label for="traditionnel">Traditionnel (    <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".traditionnel" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="nylor" id="nylor" type="checkbox" />
                        <label for="nylor">Nylor (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".nylor" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="perce" id="perce" type="checkbox" />
                        <label for="perce">Percé ( <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".perce" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    </ul>
                    <ul class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
                        <li class="title-check"><h4>Matière</h4></li>
                        <li><input value="plastique" id="plastique" type="checkbox" />
                        <label for="plastique">Plastique (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".plastique" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="metal" id="metal" type="checkbox" />
                        <label for="metal">Métal ( <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".metal" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="combine" id="combine" type="checkbox" />
                        <label for="combine">Combiné ( <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".combine" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    </ul>
                    <ul class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
                        <li class="title-check"><h4>Les +</h4></li>
                        <li><input value="madeinfrance" id="madeinfrance" type="checkbox" />
                        <label for="madeinfrance">Made in France (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".madeinfrance" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="polarises" id="polarises" type="checkbox" />
                        <label for="polarises">Verres polarisés (  <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".polarises" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    <li><input value="modele-com" id="modele-com" type="checkbox" />
                        <label for="model-com">Modèle de communication (   <span data-control-type="counter" data-control-action="counter" data-control-name="compteur-result" data-format="({count})" data-path=".modele-com" data-mode="filter" data-type="all" data-control-storage="true"></span>)</label></li>
                    </ul>
                    <div class="col-sm-12">
                        <a data-target="dropdown-filtres" class="btn btn-collapse-filter" type="button" data-toggle="dropdown" aria-expanded="true" >Fermer</a>  
                    </div>
                </div>
            </div>

    </div>`

[1rosehip]

Hi, first of all your dropdown code is not visible in the question above - please use http://jsfiddle.net/, http://jsbin.com/ or https://codepen.io to recreate your scenario.

Also please check the following control: http://jplist.com/controls/checkbox-dropdown

Maybe it could be suitable in your case.