阻止关闭点击的Bootstrap下拉列表

Question

我的菜单使用Bootstrap 3,我不能阻止关闭点击下拉.我该怎么做？

的jsfiddle

 // Add open class if active
  $('.sidebar-nav').find('li.dropdown.active').addClass('open');

  // Open submenu if active
  $('.sidebar-nav').find('li.dropdown.open ul').css("display","block");

  // Change active menu
  $(".sidebar-nav > li").click(function(){
    $(".sidebar-nav > li").removeClass("active");
    $(this).addClass("active");
  });

  // Add open animation
  $('.dropdown').on('show.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add close animation
  $('.dropdown').on('hide.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

Answer 1

你需要阻止事件冒泡DOM树:

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

event.stopPropagation 防止事件到达Bootstrap隐藏菜单最终处理的节点.

演示:http://jsfiddle.net/wkc5md23/3/

Answer 2

我认为这应该是一个更合适的解决方案,因为在click事件上停止传播有时可能会在以后的开发中引起问题.您可以在此处阅读更多内容:http://css-tricks.com/dangers-stopping-event-propagation/相反,此解决方案会停止在Bootstrap hide(hide.bs.dropdown)事件上的传播,从而阻止它继续到隐藏(hidden.bs.dropdown)事件.

我自己编写并编辑了以下代码,使其适用于所有Bootstrap下拉列表,因为它最初是从这里开始的:防止bootstrap下拉关闭点击我个人更喜欢这种方式也因为它使用内置的Bootstrap下拉事件,可以在这里找到:http://getbootstrap.com/javascript/#dropdowns-events

  $(function() {
      $('.dropdown').on({
          "click": function(event) {
            if ($(event.target).closest('.dropdown-toggle').length) {
              $(this).data('closable', true);
            } else {
              $(this).data('closable', false);
            }
          },
          "hide.bs.dropdown": function(event) {
            hide = $(this).data('closable');
            $(this).data('closable', true);
            return hide;
          }
      });
  });