Как запретить закрытие меню при клике по одному из его пунктов (элемент button dropdowns в Bootstrap)?

Question

[dobeer]

В Bootstrap есть элемент-кнопка с выпадающим меню (getbootstrap.com/components/#btn-dropdowns). Мне нужно, чтоб при клике по пункту из меню само меню не закрывалось, но осталось закрытие его при клике вне меню, как это правильно реализовать?

Comments

[kalinind]

Добавь data-bs-auto-close="outside"

Answer 1

[Николай Васильчук]

jsfiddle.net/46fLc

Comments

[dobeer]

У меня в меню есть checkbox'ы при таком варианте их невозможно установить в чекнутое состояние, есть выход?

[Николай Васильчук]

Конечно есть. Приведите пример

[dobeer]

jsfiddle.net/eUL8B изменил ваш пример, чекбокс нельзя установить в чек

[Николай Васильчук]

jsfiddle.net/eUL8B/1 Вот так

[dobeer]

Спасибо!

Answer 2

[Николай Громов]

на том же стаке есть хорошее решение:

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

получаем возможность использовать и штатное поведение, и нештатное.
причем, поскольку вызов делегированный, этот подход сработает и в том случае, если дропдаун-элемент был добавлен JS-ом.

п.с.: решение, которое отмечено сейчас как лучшее, блокирует поведение ссылок по умолчанию (неюзабельно, то есть) и жестко завязано на HTML-структуру (негибко, то есть).

Comments

[nepster-web]

отличное решение. Вариант отмеченный как правильное, очень топорный и подходит в стремных ситуациях.

[Николай Васильчук]

nepster09: в комментарии к ответу есть правильное решение.

[nepster-web]

Николай Васильчук: извиняюсь, понял. Но в любом случае решение с дополнительным селектором более эргономичное.

Answer 3

[goodknight]

Нашёл вот такой вариант на 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>

Comments

[Артём Иванов]

от души!)

[Александр Соболев]

goodknight, спасибо !