Javascript 防止 Bootstrap 下拉菜单在点击时关闭

Prevent Bootstrap dropdown from closing on clicks

提问by Kasara

My menu uses Bootstrap 3 and I can't prevent dropdown from closing on click. How can I do it?

我的菜单使用 Bootstrap 3，我无法阻止下拉菜单在点击时关闭。我该怎么做？

JSFiddle

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

回答by dfsq

You need to stop event from bubbling up the DOM tree:

您需要阻止事件冒泡 DOM 树：

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

event.stopPropagationprevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.

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

Demo: http://jsfiddle.net/wkc5md23/3/

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

回答by yaharga

I believe this should be a more proper solution, as stopping propagation on the click event might sometimes cause issues later on in development. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/Instead this solution stops propagation on the Bootstrap hide(hide.bs.dropdown) event, which stops it from continuing on to the hidden(hidden.bs.dropdown) event.

我相信这应该是一个更合适的解决方案，因为停止点击事件的传播有时可能会导致开发后期出现问题。您可以在此处阅读更多内容：http: //css-tricks.com/dangers-stopping-event-propagation/相反，此解决方案会停止 Bootstrap隐藏( hide.bs.dropdown) 事件的传播，从而阻止它继续进行到隐藏（hidden.bs.dropdown）事件。

The following code has been taken and edited by myself to make it work on all Bootstrap dropdowns, as it has originally been taken from here: Preventing bootstrap dropdown from closing on clickI personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: https://getbootstrap.com/docs/3.4/javascript/#dropdowns-events.

以下代码已被我本人采用并编辑以使其适用于所有 Bootstrap 下拉菜单，因为它最初来自此处：防止引导下拉菜单在单击时关闭我个人更喜欢这种方式，因为它使用内置的 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;
          }
      });
  });

回答by julioalberto64

Not close in click out side menu

不关闭点击侧边菜单

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

});

});

回答by Balogh Mihály

You can disable the dropdown functionality temporarily. This is a workaround.

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

Example with input field inside the drop-down "menu":

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

    //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');

    });

This can be used on anything that is clickable and you can define individually what items clicked can close or not close the drop-down menu.

这可以用于可点击的任何内容，您可以单独定义点击的项目可以关闭或不关闭下拉菜单。