如何隐藏Twitter Bootstrap下拉菜单 [英] How to hide Twitter Bootstrap dropdown

问题描述

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

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.

单击该项目时，我尝试执行以下操作:

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.

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

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

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

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

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

这篇关于如何隐藏Twitter Bootstrap下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！