Close Bootstrap Dropdown after link click

Question

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?

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

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

Answer 1

给你的链接一个类(例如下载):

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

Answer 2

这实际上可以与您现有的引导标记一起使用,而无需添加任何新类或ID.希望这对于其他想要在不改变任何现有内容的情况下放弃解决方案的人有所帮助.

$(".dropdown-menu a").click(function() {
    $(this).closest(".dropdown-menu").prev().dropdown("toggle");
});

Answer 3

这可以通过bootstraps自己的CSS类来实现 dropdown-toggle

只需将该类添加到您的链接元素,如下所示:<a class='dropdown-toggle'></a>它将切换下拉列表.

Answer 4

我认为这将关闭页面上的所有下拉菜单和扩展的navmenus:

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

Answer 5

使用event.preventDefault()而不是return false诀窍.

将您的代码更改为:

$(element).unbind('click').bind('click', function(e) {
  e.preventDefault();

  // ...

  return true; // or just remove the return clause
});

Answer 6

遗憾的是.dropdown('toggle'),如上所述,我没有成功使用......

然而,有什么工作将bootstrap的下拉按钮数据属性应用于它自己的下拉链接:

<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,它像一个魅力:)