如何隐藏Twitter Bootstrap下拉菜单
这是越来越讨厌 – 当我点击引导下拉菜单中的项目，下拉不会closures。 当您点击下拉项目时，我已经设置打开一个Facebox灯箱，但是存在问题。
我曾经尝试过
当项目被点击时，我尝试这样做：
$('.dropdown.open').removeClass('open'); $('.dropdown-menu').hide(); 这隐藏了它，但由于某种原因，它不会再次打开。
正如你所看到的，我真的需要closures下拉菜单，因为它保持打开时看起来很糟糕（主要是因为下拉菜单的z-index高于Facebox模式框叠加层。
为什么我不使用Bootstrap的内置模式框
如果你想知道为什么我不使用内置在Bootstrap中的漂亮的模式框，那是因为：
- 它没有办法通过AJAX加载内容。
- 你必须每次inputHTML的模态; 使用Facebox你可以做一个简单的：
$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'}); - 它使用CSS3animation进行animation处理（看起来非常漂亮），但在非CSS3浏览器中显示，看起来不太好; Facebox使用JavaScript淡入，所以它可以在所有浏览器中使用。
尝试这个：
$('.dropdown.open .dropdown-toggle').dropdown('toggle');
这也可能对你有用：
$('[data-toggle="dropdown"]').parent().removeClass('open');
从这里尝试了大部分的select，但没有人真的为我工作。 （ $('.dropdown.open').removeClass('open');确实隐藏了它，但是如果你在点击其他任何东西之前把它隐藏起来，它会再次出现。
所以我努力做一个$("body").trigger("click")
你只需要做$('.dropdown.open').removeClass('open'); 删除隐藏下拉菜单的第二行。
这可以通过将属性data-toggle =“dropdown”添加到锚标记中，而无需编写JavaScript代码来完成，如下所示：
<script src="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>
$('.open').removeClass('open');
是为我做的。
所选的答案不适合我，但我想这是因为Bootstrap的新版本。 我结束了写这个：
$('.btn-navbar').addClass('collapsed'); $('.nav-collapse').removeClass('in').css('height', '0');
希望对未来的其他人有帮助。
这对我来说是有效的：
$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");
为什么使用我的方法，因为如果用户离开div，这个方法允许用户在子菜单消失之前有一定的延迟。 这就像使用超级插件。
1）首先下载hover意图的JavaScript
链接在这里：hover意图的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); });
试着用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>
$('.dropdown.open').removeClass('open');
阅读文档并使用JavaScript，可以使用切换方法完成：
$('.button-class').on('click',function(e) { e.preventDefault(); $('.dropdown-class').dropdown('toggle'); }
你可以阅读： http ： //getbootstrap.com/javascript/#dropdowns-methods
尝试这个！
.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");
要么
$(clicked_element).trigger("click");
它总是为我工作。
这里是我如何closuresbutton下拉并切换button的解决scheme：
$(".btn-group.open", this) .trigger("click") .children("a.dropdown-toggle") .trigger("blur")
其中“this”是button组的全局容器。
这工作对我来说，我有一个导航栏和几个下拉菜单。
$(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”，然后当你点击定位标记时，它将closures引导下拉菜单。
嘿这个简单的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; });
