防止 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();
  });

- Kasara

---

相关问题：https://dev59.com/Vl8f5IYBdhLWcg3wD_Av - Carol Skelly

Answer 1

您需要阻止事件从DOM树向上传播:

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

event.stopPropagation 可以阻止事件冒泡，从而避免 Bootstrap 隐藏菜单时该事件到达其所处理的节点。

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

- dfsq

---

不错。但它只适用于菜单链接。 在页面其他位置点击无效。 - Kasara

你想让菜单永远不关闭吗？ - dfsq

是的，仅当菜单没有下拉选项时。 - Kasara

如果您在菜单外面单击，菜单就不会关闭吗？ - dfsq

是的，如果您在菜单外面单击，它永远不会关闭。 - Kasara

是的。你是最棒的 :) - Kasara

Answer 2

我认为这应该是更合适的解决方案，因为在单击事件上停止传播有时可能会在开发后期引起问题。您可以在此处阅读更多信息：http://css-tricks.com/dangers-stopping-event-propagation/相反，此解决方案停止 Bootstrap hide (hide.bs.dropdown) 事件上的传播，从而防止其继续到 hidden (hidden.bs.dropdown) 事件。

以下代码已由我进行了编辑以使其适用于所有 Bootstrap 下拉菜单，因为它最初是从这里获取的：Preventing bootstrap dropdown from closing on click 我个人也更喜欢这种方式，因为它使用了内置的 Bootstrap 下拉菜单事件，可以在此处找到：https://getbootstrap.com/docs/3.4/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;
    }
  });
});

- yaserso

---

被采纳的答案对我没有用。它可以防止关闭，但也会使得下拉菜单中我的控件点击完全无效。这个解决方案给了我正好想要的东西，也正是这个问题所问的。谢谢！ - Ernesto

仅供参考，仍然有效。谢谢！ :) - jwanglof

如果您在下拉菜单中有切换开关或其他按钮，则这是最佳选项。谢谢！+5 - mrbangybang

我花了几个小时来寻找这个解决方案。它有效！ - Arthur Veselov

Answer 3

点击菜单外部不关闭

$(function() {
  var closeble = false;
  $('body').on('click', function (e) {
    if (!$(event.target).is('a.dropdown-toggle')) {
      closeble = false;
    }
  });
  
  $('.dropdown').on({
    'click': function (event) {
      if ($(event.target).closest('.dropdown-toggle').length) {
        closeble = true;
      } else {
        closeble = false;
      }
    },
    'hide.bs.dropdown': function () {
      return closeble;
    }
  });
});

- julioalberto64

Answer 4

您可以暂时禁用下拉功能。这是一种解决方法。

带有输入字段的下拉“菜单”的示例：

//for dropdown field not closing when clicking on inputfield
$(document).on('focus', 'input', function (e) {
  // this attribute can be anything except "dropdown", you can leave it blank
  $('#yourDropdownID').attr('data-toggle', 'off');
});

//for dropdown field back to normal when not on inputfield
$(document).on('focusout', 'input', function (e) {
  $('#yourDropdownID').attr('data-toggle', 'dropdown');
});

这可以用于任何可点击的东西，您可以个别定义哪些被单击的项目可以关闭或不关闭下拉菜单。

- Balogh Mihály