Випадаючий список Bootstrap закривається при натисканні

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

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

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

Чи може хтось сказати мені, куди мені це поставити? Я спробував у випадаючому меню випаду завантаження, я намагався в HTML, але він все ще не працює.

Просто скористайтеся цим прикладом. Це рішення працює для мене.

<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>

Сподіваюся, це допоможе. Дякую.

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

JS

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

Якщо ви хочете припинити закривати лише деякі спадні меню, не всі, просто додайте додатковий клас до свого блоку 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(); }
});

Минув час з моменту прийняття відповіді, але якщо ви хочете, щоб випадаюче меню залишалося відкритим, якщо воно діє як своєрідне діалогове вікно, найкращий спосіб, на мою думку:

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });

Вам потрібно зупинити подію, яка не спливає до дерева DOM:

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

event.stopPropagation заважає події потрапити до вузла, де врешті обробляється меню приховування Bootstrap.

Це працює для мене (бічна бічна панель відкриває просте посилання з перемикачем завантаження)

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});

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

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});

Покласти

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

за оригінальною відповіддю видаліть усі класи і просто поставте клас ".dropdown-menu", він у мене спрацював. у мене є поле введення всередині випадаючого меню.

Якщо ви заглянете до кінця джерел випадаючого віджета, то побачите таке:

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

Отже, у вас є такий вибір:

1. Просто оберніть свій випадаючий список формою
2. Або ви можете додати прослуховувач події для події кліку .dropdown YOUR_SELECTOR

$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })