关闭Bootstrap下拉链接后点击 [英] Close Bootstrap Dropdown after link click

问题描述

我在下面有一个引导下拉菜单。它有一个链接到一个knockout.js绑定，它返回false，因为我不想要＃标签发送到浏览器的url。但是，当我单击链接时，不要关闭下拉菜单。无论如何？

HTML

 < div class =btn-group> 
< button class =btn dropdown-toggledata-toggle =dropdowndata-bind =enable：！noResults（）>< i class =icon-download-alt> < I> /;导出< span class =icon-caret-down>< / span>< / button> 
 
< ul class =dropdown-menu> 
 @foreach（Model.ExportUrls中的var exportUrl）
 {
< li> 
< a href =＃data-bind =disable：noResults（），下载：{url：'@ exportUrl.Value'，data：data}>< img src =/ /less/images/img/@(exportUrl.Key.ToString().ToLower()).pngalt =@ 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 =downloaddata-bind =disable：noResults（）.... 
  

您的下拉列表中的一个ID（例如dlDropDown）：

 < button class =btn dropdown-toggleid =dlDropDowndata-toggle =dropdowndata-bind =enable：！noResults（）> 
  

然后添加以下事件处理程序：

  $（a.download）。click（function（）{
 $（＃dlDropDown）。dropdown（toggle）; 
} ）; 
  

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

解决方案

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

这篇关于关闭Bootstrap下拉链接后点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！