如何隐藏 Twitter Bootstrap 下拉菜单答案

【问题标题】：How to hide Twitter Bootstrap dropdown如何隐藏 Twitter Bootstrap 下拉菜单
【发布时间】：2012-06-08 00:08:17
【问题描述】：

这越来越烦人了——当我点击 Bootstrap 下拉菜单中的一个项目时，下拉菜单并没有关闭。我已将其设置为在您单击下拉项时打开 Facebox 灯箱，但它存在问题。

我的尝试

单击该项目时，我尝试这样做：

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

它隐藏了它，但由于某种原因它不会再次打开。

如您所见，我确实需要关闭下拉菜单，因为它保持打开状态时看起来很糟糕（主要是因为下拉菜单的 z-index 高于 Facebox 模态框叠加层。

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

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

无法使用 AJAX 将内容加载到其中。
您必须每次为模态输入 HTML；使用 Facebox，您可以做一个简单的事情：$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
它使用 CSS3 动画来制作动画（看起来非常漂亮），但在非 CSS3 浏览器中它只是显示，看起来不太好； Facebox 使用 JavaScript 淡入，因此它适用于所有浏览器。

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

试试这个：

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

这也可能对您有用：

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

【讨论】：

我添加了另一种可能对您有用的方法。如果没有，请仔细检查包含您的按钮的 div.btn-group 元素是否分配了“open”类。
.dropdown('toggle') 关闭下拉菜单，但也禁止它再次打开！不知道有什么用！
当我使用 .dropdown('toggle') 时，附加到下拉列表中项目的其他点击处理程序停止工作。但是，当我使用 .parent().removeClass('open') 方法时，我没有这个问题。
注意：删除 open 类有效，但不会更新 aria-expanded。尽可能使用 API 总是更好。
$('.dropdown.open .dropdown-toggle').dropdown('toggle'); 将适用于独立的下拉按钮，使其也适用于您可以执行的下拉菜单和按钮组$('.open>.dropdown-toggle').dropdown('toggle');

【解决方案2】：

尝试了这里的大多数选项，但没有一个真正适合我。（$('.dropdown.open').removeClass('open'); 确实隐藏了它，但是如果您在单击其他任何内容之前将鼠标悬停在上面，它会再次出现。

所以我决定用$("body").trigger("click") 来做这件事

【讨论】：

这也是一个好方法！因此，当您虚拟点击<body> 时，它会关闭下拉菜单？
是的，下拉列表列出了菜单外用户的点击事件。 :)
@VeXii 是的，这就是它没有在移动设备上关闭自己的原因。希望新的引导程序版本 3（“移动优先”）能解决这个问题。
工作无缺陷。

【解决方案3】：

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

引导程序 4（2018 年 10 月）：

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

【讨论】：

我认为这确实是最简单的解决方案，除了在 Bootstrap 4 中您使用“show”类。

【解决方案4】：

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

【讨论】：

但这不会改变 aria-attribute。

【解决方案5】：

这对我有用：

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

【讨论】：

【解决方案6】：

这可以通过将属性 data-toggle="dropdown" 添加到锚标记中来完成，而无需编写 JavaScript 代码，如下所示：

<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>

【讨论】：

对我来说最简单和最相关的答案。很好解释。谢谢

【解决方案7】：

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

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

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

【讨论】：

感谢您的回答。我相信我仍在使用 Bootstrap 2.2。

【解决方案8】：

试试这个！

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

或

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

它总是对我有用。

【讨论】：

你是国王！对我来说最好的东西！ Tnx！

【解决方案9】：

为什么使用我的方法，因为如果用户离开了 div，这个方法允许用户在子菜单消失之前有一定的延迟。就像使用 superfish 插件一样。

1) 首先下载hover intent javascript

Link here : Hover intent 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);

    });

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

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

您可以阅读：http://getbootstrap.com/javascript/#dropdowns-methods

【讨论】：

【解决方案12】：

回想起来可能已经添加了它（虽然，该功能不是 documented，即使在 Bootstrap 4.3.1 中也是如此），但您可以简单地使用 hide 参数调用它。只要确保在切换器元素上调用它。像这样：

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

当然，这也适用于show。

【讨论】：

在next section中被斜称为“隐藏实例方法”。

【解决方案13】：

尝试用 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>

【讨论】：

【解决方案14】：

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

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

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

【讨论】：

【解决方案15】：

引导 4.1：

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

【讨论】：

【解决方案16】：

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

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

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

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

【讨论】：

【解决方案17】：

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

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

【讨论】：

【解决方案18】：

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

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

然后每次你想隐藏下拉菜单，你打电话：

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

【讨论】：

【解决方案19】：

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

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

【讨论】：

【解决方案20】：

点击后：

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

【讨论】：

【解决方案21】：

在锚标签上使用 class="dropdown-toggle"，然后当你点击锚标签时，它会关闭引导下拉菜单。

【讨论】：

【解决方案22】：

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

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

【讨论】：

【解决方案23】：

最简单的方法：

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

【讨论】：

【解决方案24】：

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

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

【讨论】：