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 don't want the # tag to be sent to the browser URL. However, doing this doesn't close the dropdown menu when I click the link. Any way 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

Give your links a class (e.g. download):

<a href="#" class="download" data-bind="disable: noResults().... 

And your dropdown an id (e.g. 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"); }); 

Answer 2

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.

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