点击链接后closures引导程序下拉菜单
下面有一个引导下拉菜单。 它有一个链接，它连接到一个knockout.js绑定，返回false，因为我不希望＃标签发送到浏览器的url。 但是，这样做不会closures下拉菜单，当我点击链接。 无论如何，这个呢？
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/lesshttp://img.dovov.comimg/@(exportUrl.Key.ToString().ToLower()).png" alt="@exportUrl.Key.GetDisplayName()"/> @exportUrl.Key.GetDisplayName()</a> </li> } </ul> </div> knockut.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; }); } };
给你的链接一个类（如下载）：
<a href="#" class="download" data-bind="disable: noResults()....
和你的下拉一个id（例如dlDropDown）：
<button class="btn dropdown-toggle" id="dlDropDown" data-toggle="dropdown" data-bind="enable: !noResults()">
然后添加下面的事件处理程序：
$("a.download").click(function() { $("#dlDropDown").dropdown("toggle"); });
这将实际上与您现有的引导标记，而无需添加任何新的类或ID。 希望这有助于其他人只是在不改变任何东西的情况下放弃解决scheme。
$(".dropdown-menu a").click(function() { $(this).closest(".dropdown-menu").prev().dropdown("toggle"); });
这可以通过bootstraps自己的CSS类dropdown-toggle来实现
只需将该类添加到链接元素中，如下所示： <a class='dropdown-toggle'></a> ，它将切换下拉菜单。
我认为这将closures所有下拉菜单并在页面上扩展navmenus：
$('.in,.open').removeClass('in open');
只需将href="#"更改为href="javscript:void(0);" 然后在您的点击事件中return true （而不是false ）。
使用event.preventDefault()而不是return false做的伎俩。
将您的代码更改为：
$(element).unbind('click').bind('click', function(e) { e.preventDefault(); // ... return true; // or just remove the return clause });
我不幸地没有成功使用.dropdown('toggle')如上所述…
然而，什么工作是将引导程序的下拉button数据属性应用到它自己的下拉链接：
<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>
我所做的只是将data-toggle="collapse"和data-target=".navbar-collapse"到每个下拉导航链接。
没有额外的CSS或JS，它像一个魅力:)
如果你有一个事件参数只是做：
$(element).unbind('click').bind('click', function (event) { event.preventDefault(); return true; });
一个更干净的解决scheme，保持下拉function，并得到你在找什么。
$("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"); });
最好的答案就是执行点击操作，就像用户点击鼠标隐藏下拉菜单一样，添加这个pipe理代码到你的页面：
<script> $(document).ready(function () { $("li.dropdown ul.dropdown-menu li").click(function (event) { event.toElement.parentElement.click(); }) }) </script>
