jQuery 如何隐藏 Twitter Bootstrap 下拉菜单

How to hide Twitter Bootstrap dropdown

提问by Nathan

This is getting annoying — when I click on an item in a Bootstrap dropdown, the dropdown doesn't close. I have it set up to open a Facebox lightbox when you click the dropdown item but there is a problem with it.

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

---

---

What I have tried

我试过的

When the item is clicked, I tried doing this:

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

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

That hides it, but then for some reason it won't open again.

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

As you can see I really need the dropdown to close, because it looks crappy when it stays open (mainly because the z-indexof the dropdown is higher than the Facebox modal box overlay.

正如你所看到的，我真的需要关闭下拉菜单，因为它在保持打开状态时看起来很糟糕（主要是因为z-index下拉菜单高于 Facebox 模式框覆盖。

---

---

Why I'm not using Bootstrap's built-in modal box

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

If you're wondering why I'm not using the nice-looking modal box built into Bootstrap, it is because:

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

1. It doesn't have a way to load content into it with AJAX.
2. You have to type HTML each time for the modal; with Facebox you can do a simple: $.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. It uses CSS3 animations to animate (which looks very nice) but in non-CSS3 browsers it just shows, which doesn't look that nice; Facebox uses JavaScript to fade in so it works in all browsers.

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

回答by Bart Wegrzyn

Try this:

尝试这个：

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

This may also work for you:

这也可能对您有用：

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

回答by VeXii

tryed out most the options from here but none of them realy worked for me. (the $('.dropdown.open').removeClass('open');did hide it, but if you moused over before clicking anything else it showed up again.

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

so i endet up doing it whith a $("body").trigger("click")

所以我最终这样做了 $("body").trigger("click")

回答by kuiro5

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

Bootstrap 4 (October 2018):

Bootstrap 4（2018 年 10 月）：

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

回答by Shivaji Mutkule

This can be done without writing JavaScript code by adding attribute data-toggle="dropdown"into anchor tag as shown bellow:

这可以在不编写 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>

回答by Gurinder

You only need to do $('.dropdown.open').removeClass('open');remove second line which hides the dropdown menu.

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

回答by Dan Puza

This is what worked for me:

这对我有用：

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

回答by scolja

The selected answer didn't work for me, but I'm thinking it's because of the newer version of Bootstrap. I ended up writing this:

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

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

Hopefully that's helpful to someone else in the future.

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

回答by bbc_danang

Try this!

尝试这个！

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

OR

或者

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

It always work for me.

它总是对我有用。

回答by Sylvain

Why use my method, because if the user gets out of the div, this metod allows the user a certain delay before the submenus dissapear. It's just like using the superfish plugin.

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

1) First download hover intent javascript

1）首先下载悬停意图javascript

Link here : Hover intent javascript

此处链接：悬停意图 javascript

2)Here is my code to execute

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

    });

回答by Jared Christensen

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