如何隐藏Twitter Bootstrap下拉菜单

这很烦人-当我在Bootstrap下拉菜单中单击某个项目时，该下拉菜单不会关闭。当您单击下拉项时，我将其设置为打开Facebox灯箱，但是它有问题。

我尝试过的

单击该项目后，我尝试执行以下操作：

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

这将其隐藏起来，但是由于某种原因，它将无法再次打开。

如您所见，我确实需要关闭下拉菜单，因为它在保持打开状态时显得cr脚（主要是因为z-index下拉菜单的高于Facebox模式框叠加层。

为什么我不使用Bootstrap的内置模式框

如果您想知道为什么我不使用Bootstrap内置的漂亮模态框，那是因为：

1. 它没有办法使用AJAX将内容加载到其中。
2. 您每次必须为模式输入HTML；使用Facebox，您可以执行以下操作：$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. 它使用CSS3动画进行动画处理（看起来很不错），但是在非CSS3浏览器中它只是显示出来，看上去并不那么好。Facebox使用JavaScript淡入，因此可在所有浏览器中使用。

试试这个：

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

这也可能为您工作：

$('[data-toggle="dropdown"]').parent().removeClass('open');

从这里尝试了大多数选项，但没有一个对我有用。（$('.dropdown.open').removeClass('open');确实将其隐藏，但是如果您在单击其他任何按钮之前将鼠标悬停在它上方，它将再次显示。

所以我忍受了 $("body").trigger("click")

$('.open').removeClass('open');

Bootstrap 4（2018年10月）：

$('.show').removeClass('show');

无需编写JavaScript代码即可完成此操作，方法是将属性data-toggle =“ dropdown”添加到锚标记中，如下所示：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

您只需要$('.dropdown.open').removeClass('open');删除第二行即可隐藏下拉菜单。

这对我有用：

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

选择的答案对我不起作用，但是我认为这是因为Bootstrap的版本较新。我最终写了这个：

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

希望对将来的其他人有所帮助。

试试这个！

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

要么

$(clicked_element).trigger("click");

它总是为我工作。

为什么使用我的方法，因为如果用户退出div，此方法会使用户在子菜单消失之前有一定的延迟。就像使用superfish插件一样。

1）首先下载悬浮意图的JavaScript

此处链接：悬停意图javascript

2）这是我要执行的代码

$(document).ready(function(){

        var config = {    
            over: showBootrapSubmenu,   
            timeout: 500,
            out: hideBootrapSubmenu  
        };

        function showBootrapSubmenu(){  
             $(this).addClass('open');
        }
        function hideBootrapSubmenu(){  
          $(this).removeClass('open');
            }

        //Hover intent for Submenus
        $(".dropdown").hoverIntent(config);

    });

$('.dropdown.open').removeClass('open');

阅读文档并使用JavaScript可以使用toggle方法完成：

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

您可以在以下网站中了解它：http : //getbootstrap.com/javascript/#dropdowns-methods

尝试使用Bootstrap Modal打开HTML，我使用以下代码：

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
}); 

链接是这样的：

<a href="#my_page" data-toggle="modal">PAGE</a>

这是我关于如何关闭按钮下拉菜单和切换按钮的解决方案：

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

其中“ this”是按钮组的全局容器。

Bootstrap 4.1：

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');

这对我有用，我有一个导航栏和几个下拉菜单。

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

最简单的方法是：添加隐藏标签：

<label class="hide_dropdown" display='hide'></label>

然后，每次您想隐藏下拉菜单时，您都可以调用：

$(".hide_dropdown").trigger('click');

不知道这是否会对任何人有帮助（也许对我的情况而言太具体了，而不是对这个问题而言），但是对我来说，这可行：

$('.input-group.open').removeClass('open');

单击后：

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

在锚标记上使用class =“ dropdown-toggle”，然后单击锚标记将关闭引导程序下拉菜单。

嘿，这个简单的jQuery技巧应该会有所帮助。

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

简便的方法：

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

您可以在当前事件处理程序中使用此代码

$('.in,.open').removeClass('in open');

在我的场景中，我使用了ajax调用完成时

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

按属性选择是较慢的方法。这是隐藏打开的下拉菜单的最快解决方案：

$(".dropdown-menu.show").parent().dropdown("toggle");

或使用以下命令（如果.dropdown菜单不是下一个子元素）（找到最近的父下拉菜单控件）：

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");

回顾起来可能已经添加了它（尽管该功能没有 记录，即使在Bootstrap 4.3.1中也没有记录），但是您可以简单地使用hide参数来调用它。只需确保在切换器元素上调用它即可。像这样：

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

当然，这也与相反show。