twitter-bootstrap 单击链接后关闭 Bootstrap Dropdown
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18855132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close Bootstrap Dropdown after link click
提问by Mike Flynn
I have a bootstrap dropdown menu below. It has a link in it hooked up to a knockout.js binding, that returns false because I dont want the # tag to be send to the browser url. However doing this doesnt close the dropdown menu when I click the link. Anyway around this?
我在下面有一个引导程序下拉菜单。它有一个链接到knockout.js 绑定，返回false 因为我不希望# 标签被发送到浏览器url。但是，当我单击链接时，这样做不会关闭下拉菜单。无论如何围绕这个？
HTML
HTML
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="enable: !noResults()"><i class="icon-download-alt" ></i> Export <span class="icon-caret-down"></span></button>
<ul class="dropdown-menu">
@foreach(var exportUrl in Model.ExportUrls)
{
<li>
<a href="#" data-bind="disable: noResults(), download: { url: '@exportUrl.Value', data: data }"><img src="/Content/less/images/img/@(exportUrl.Key.ToString().ToLower()).png" alt="@exportUrl.Key.GetDisplayName()"/> @exportUrl.Key.GetDisplayName()</a>
</li>
}
</ul>
</div>
knockut.js binding
敲除.js 绑定
ko.bindingHandlers.download = {
init: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
id = 'download-iframe-container',
iframe;
$(element).unbind('click').bind('click', function () {
iframe = document.getElementById(id);
if (!iframe) {
iframe = document.createElement("iframe");
iframe.id = id;
iframe.style.display = "none";
}
if (value.data) {
iframe.src = value.url + (value.url.indexOf('?') > 0 ? '&' : '?') + $.param(ko.mapping.toJS(value.data));
} else {
iframe.src = value.url;
}
document.body.appendChild(iframe);
return false;
});
}
};
回答by mccannf
Give your links a class (e.g. download):
给你的链接一个类（例如下载）：
<a href="#" class="download" data-bind="disable: noResults()....
And your dropdown an id (e.g. dlDropDown):
你的下拉列表是一个 id（例如 dlDropDown）：
<button class="btn dropdown-toggle" id="dlDropDown" data-toggle="dropdown" data-bind="enable: !noResults()">
And then add the following event handler:
然后添加以下事件处理程序：
$("a.download").click(function() {
$("#dlDropDown").dropdown("toggle");
});
回答by brianespinosa
This will actually work with your existing bootstrap markup without having to add any new classes or ids. Hopefully this is helpful to someone else just looking to drop a solution in without changing anything existing.
这实际上可以与您现有的引导标记一起使用，而无需添加任何新类或 ID。希望这对其他人有所帮助，只是希望在不更改任何现有内容的情况下放入解决方案。
$(".dropdown-menu a").click(function() {
$(this).closest(".dropdown-menu").prev().dropdown("toggle");
});
回答by nullwriter
This can be achieved with bootstraps own CSS class dropdown-toggle
这可以通过引导程序自己的 CSS 类来实现 dropdown-toggle
Just add that class to your link elements like so: <a class='dropdown-toggle'></a>and it will toggle the dropdown.
只需将该类添加到您的链接元素中，如下所示：<a class='dropdown-toggle'></a>它将切换下拉列表。
回答by Tom
I think this will close all dropdowns and expanded navmenus on the page:
我认为这将关闭页面上的所有下拉菜单和扩展的导航菜单：
$('.in,.open').removeClass('in open');
回答by Jesse Novotny
I unfortunately had no success using .dropdown('toggle')as suggested above...
不幸的是，我没有.dropdown('toggle')按照上面的建议成功使用......
What did work however was applying bootstrap's dropdown button data attributes to it's own dropdown links:
然而，有效的是将引导程序的下拉按钮数据属性应用于它自己的下拉链接：
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle navbar-btn">
...
...
<ul class="nav navbar-nav">
<li><a href="#about" class="scroll-to" data-toggle="collapse" data-target=".navbar-collapse">About</a></li>
All I did was add the data-toggle="collapse"and data-target=".navbar-collapse"to each dropdown nav link.
我所做的只是将data-toggle="collapse"和添加data-target=".navbar-collapse"到每个下拉导航链接。
No additional css or js and it worked like a charm :)
没有额外的 css 或 js，它就像一个魅力:)
回答by Fábio Batista
Using event.preventDefault()instead of return falsedoes the trick.
使用event.preventDefault()代替return false可以解决问题。
Change your code to:
将您的代码更改为：
$(element).unbind('click').bind('click', function(e) {
e.preventDefault();
// ...
return true; // or just remove the return clause
});
回答by Rich
Simply change the href="#"to href="javscript:void(0);"and then return truein your click event (instead of false).
只需将 更改href="#"为href="javscript:void(0);"，然后return true在您的点击事件中（而不是false）。
回答by Dave
If you've got an event parameter just do:
如果您有事件参数，请执行以下操作：
$(element).unbind('click').bind('click', function (event)
{
event.preventDefault();
return true;
});
回答by Raúl Cantú
A cleaner solution, to keep the dropdown functionality and get what you are looking for.
一个更干净的解决方案，保留下拉功能并获得您正在寻找的内容。
$("body").on('click', function (e) {
if (!$(e.target).hasClass("open") && $(e.target).parents(".btn-group.open").length == 0)
$(this).find(".btn-group.open a").trigger("click");
});
回答by daniel gi
you can also add a transparent mask to block any other unwanted click when dropdown is open:
您还可以添加透明蒙版以在下拉菜单打开时阻止任何其他不需要的点击：
OnDomReadyHeaderItem.forScript("$('.dropdown').on('shown.bs.dropdown', function (e) { $(this).append('<span id=\"transparent-mask\"></span>')})"));
OnDomReadyHeaderItem.forScript("$('.dropdown').on('hidden.bs.dropdown', function (e) { $('#transparent-mask').remove()})"));
with the mask:
带着面具：
.dropdown.open #transparent-mask{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
margin: auto;
height: initial;
z-index: 1000 !important;
}
