防止 Bootstrap 下拉菜单在点击时关闭 [英] Prevent Bootstrap dropdown from closing on clicks

问题描述

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

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

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

推荐答案

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

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

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

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

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

这篇关于防止 Bootstrap 下拉菜单在点击时关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！