How to prevent the menu from closing when one of its items is clicked (button dropdowns element in Bootstrap)?

Question

Bootstrap

Bootstrap has a button element with a dropdown menu ( getbootstrap.com/components/#btn-dropdowns ). I need that when clicking on an item from the menu, the menu itself does not close, but it remains to be closed when clicking outside the menu, how to implement this correctly?

Answer 1

jsfiddle.net/46fLc

Answer 2

on the same stack there is a good solution:

$(document).on(
    'click.bs.dropdown.data-api', 
    '[data-toggle="collapse"]', // тут прописываем селектор, который добавляем к тем .dropdown-menu, которые не должна закрываться по клику на внутренних элементах
    function (e) { e.stopPropagation() }
);

we get the opportunity to use both regular behavior and abnormal behavior.
moreover, since the call is delegated, this approach will work even if the dropdown element was added by JS.
ps: the solution currently marked as the best blocks the behavior of links by default (unusable, that is) and is tightly tied to the HTML structure (inflexible, that is).

Answer 3

Found this one on StackOverFlow :

<script type="text/javascript">

    $(document).ready(function() {
        $(document).on('click', '.dropdown-menu', function (e) {
            $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional.
        }); 
    });
    </script>