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

В Bootstrap есть элемент-кнопка с выпадающим меню (getbootstrap.com/components/#btn-dropdowns). Мне нужно, чтоб при клике по пункту из меню само меню не закрывалось, но осталось закрытие его при клике вне меню, как это правильно реализовать?
  • Вопрос задан
  • 11026 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
nicothin
@nicothin
веб-разработчик с 2000 г.
на том же стаке есть хорошее решение:
$(document).on(
    'click.bs.dropdown.data-api', 
    '[data-toggle="collapse"]', // тут прописываем селектор, который добавляем к тем .dropdown-menu, которые не должна закрываться по клику на внутренних элементах
    function (e) { e.stopPropagation() }
);

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

п.с.: решение, которое отмечено сейчас как лучшее, блокирует поведение ссылок по умолчанию (неюзабельно, то есть) и жестко завязано на HTML-структуру (негибко, то есть).
Ответ написан
@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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы