防止 Bootstrap 下拉菜单在点击时关闭 [重复]

Posted 2023-02-22

【中文标题】防止 Bootstrap 下拉菜单在点击时关闭 [重复]

【英文标题】：Prevent Bootstrap dropdown from closing on clicks [duplicate]

【发布时间】：2014-12-25 16:31:12

【问题描述】：

我的菜单使用 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();
  );

【问题讨论】：

相关问题：***.com/questions/25089297/…

【参考方案1】：

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

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

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

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

【讨论】：

不错。但它仅适用于菜单链接。点击 body 上的其他地方。

您希望菜单永远不会关闭？

是的，只有当菜单没有下拉菜单时。

所以如果你点击外部菜单永远不会关闭？

是的，如果您单击外部菜单，则永远不会关闭

【参考方案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;
          
      );
  );

【讨论】：

接受的答案对我不起作用。它可以防止关闭，但它也可以防止下拉菜单中我的控件中的点击工作。这个解决方案给了我我想要的东西，这正是这个问题所要求的。谢谢！

仍然有效。谢谢！ :)

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

【参考方案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;
       
   );
);

【参考方案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');

    );

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