Вопрос по html5, javascript, drop-down-menu, twitter-bootstrap – Закрытие выпадающего меню при нажатии

76

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

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

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

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

Ваш Ответ

9   ответов
5

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

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});
Error: User Rate Limit Exceeded
5

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

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

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

  1. Simply wrap yor dropdown with form
  2. Or you can add event listener for click event of .dropdown YOUR_SELECTOR
$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })
Error: User Rate Limit Exceeded
9

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

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });
Error: User Rate Limit Exceeded
4

Положил

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

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

Screenshot of menu

Error: User Rate Limit Exceeded
10

Если вы хотите прекратить закрывать только некоторые из выпадающих меню, а не все, просто добавьте дополнительный класс в свой блок 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(); }
});
Error: User Rate Limit Exceeded
4

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

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

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

JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Sorin Cioban
Error: User Rate Limit Exceedede.stopPropagation();Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Sorin Cioban
Error: User Rate Limit Exceeded.dropdown-menuError: User Rate Limit Exceeded
8

Вы должны остановить событие от всплывающего дерева DOM:

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

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

4

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

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

Надеюсь, это поможет. Благодарю.

Похожие вопросы