Закрытие выпадающего меню при нажатии

74

Я помещаю форму внутри выпадающего списка начальной загрузки, но когда я нажимаю любое из полей в форме, выпадающее меню исчезает. У меня есть этот фрагмент кода, но я не знаю, куда его помещать, чтобы предотвратить исчезновение выпадающего списка.

$(function test() {
  // Setup drop down menu
  $('.dropdown-toggle').dropdown();

  // Fix input element click problem
  $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
  });
});

Может кто-нибудь, пожалуйста, скажите мне, где я должен это поставить? Я попытался в раскрывающемся списке bootstrap, я попытался в HTML, но он все еще не работает.

Теги:
drop-down-menu

9 ответов

3
Лучший ответ

Просто используйте этот пример. Это решение работает для меня.

<script type="text/javascript">
window.addEvent('domready',function() {    
   Element.prototype.hide = function() {
      $(function () { 
        // replace your tab id with myTab
        //<ul id="myTab" class="nav nav-tabs">
        $('#myTab li:eq(1) a').tab('show');
      });      
   };
});
</script>

Надеюсь, это поможет. Спасибо.

Поделиться
123

Вы можете опустить выпадающий вызов вместе, выпадающее меню бутстрапа будет работать без него. Убедитесь, что вы правильно упаковываете свой script, вы можете включить его в заголовок или тело вашей страницы, хотя лично я предпочитаю размещать его на теле вашей страницы.

JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>
Поделиться
  • 0
    Я поместил его в тело, и оно все равно не будет работать. Могу ли я просто поместить его после <body> и перед моим первым <div>?
  • 0
    @SorinCioban, с каких элементов формы вы пытаетесь остановить распространение события click? Верхняя строка предназначена только для элементов формы ввода и метки. Есть ли другие элементы формы, доступные в вашей выпадающей форме? Кроме того, контейнер .dropdown-menu является родителем ваших элементов формы?
Показать ещё 3 комментария
9

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

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });
Поделиться
  • 1
    Я пробовал этот подход, но выпадающий сейчас не появляется вообще
8

Если вы хотите прекратить закрывать только какое-то раскрывающееся меню, не все из них, то просто добавьте дополнительный класс в свой блок ul:

<ul class="dropdown-menu keep-open-on-click">

И используйте этот код:

$(document).on('click', '.dropdown-menu', function(e) {
    if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
Поделиться
  • 0
    Это сработало для меня здорово!
5

Вам нужно остановить событие от пузырьков дерева DOM:

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

event.stopPropagation не позволяет событию добраться до node, где он в конечном итоге обрабатывается меню скрытия Bootstrap.

Поделиться
5

Это работает для моей (боковой боковой панели, открывающей простую ссылку с переключением бутстрапа)

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});
Поделиться
  • 1
    Спасибо! Мне нравится этот подход, однако мне пришлось использовать $ ('dropdown-menu') ... чтобы он работал
4

Если вы посмотрите на дно источников виджета выпадающего списка, вы увидите следующее:

$(document)
  .on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
    e.stopPropagation()
  })

Итак, у вас есть следующие варианты:

  • Просто оберните раскрывающееся меню
  • Или вы можете добавить прослушиватель событий для события click.dropdown YOUR_SELECTOR
$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })
Поделиться
  • 0
    Отличный совет, спасибо.
4

Помещенный

<script type="text/javascript">
    $('.dropdown-menu').click(function(e) {
          e.stopPropagation();
    });
</script>

в исходном ответе, удалите все классы и просто поместите класс ".dropdown-menu", это сработало для меня. У меня есть поле ввода внутри выпадающего меню.

Изображение 2417

Поделиться
  • 0
    фантастический и очень простой. Спасибо друг
4

Спасибо за вышеупомянутый ответ, у меня была такая же проблема с подменю в раскрывающемся меню. Используя вышеприведенное решение, я смог решить проблему и для этого.

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню