单击链接后关闭引导下拉菜单

Posted 2023-02-22

【中文标题】单击链接后关闭引导下拉菜单

【英文标题】：Close Bootstrap Dropdown after link click

【发布时间】：2013-09-22 04:53:01

【问题描述】：

我在下面有一个引导下拉菜单。它有一个链接到一个 knockout.js 绑定，它返回 false，因为我不希望将 # 标记发送到浏览器 URL。但是，当我单击链接时，这样做不会关闭下拉菜单。有什么办法吗？

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" /> @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;
        );
    
;

【参考方案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");
);

【讨论】：

我走了你的路线，但改用了这个，$('button[data-toggle=dropdown]').dropdown('toggle');

其实这个。 $(element).parents('.open').find('button[data-toggle=dropdown]').dropdown('toggle');

【参考方案2】：

我认为这将关闭页面上的所有下拉菜单和展开的导航菜单：

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

【讨论】：

迄今为止的最佳答案。其他一些答案会阻止菜单再次打开，直到重新加载页面；这没有。我的用法：$(".modal").on("show.bs.modal", function() $(".dropdown.in,.dropdown.open").removeClass("in open"); );

我还发现 class='dropdown-toggle' 解决方案改变了下拉选项的格式。这对我来说是最好的解决方案。

【参考方案3】：

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

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

【讨论】：

不像所选答案那样具有侵略性。谢谢

我喜欢这个，但稍微改变了它以找到最近的下拉容器，然后向下查找下拉处理程序：$(this).closest(".dropdown").find("[data-toggle='dropdown']").dropdown("toggle");

$(".dropdown-menu a").on("click.bs.dropdown", function () );

【参考方案4】：

只需将点击事件中的href="#" 更改为href="javscript:void(0);"，然后更改return true（而不是false）。

【参考方案5】：

最好的答案是执行单击，这样它的行为与用户单击鼠标隐藏下拉菜单的行为相同，为此，请将此快照代码添加到您的页面：

<script>
    $(document).ready(function () 
        $("li.dropdown ul.dropdown-menu li").click(function (event) 
            event.toElement.parentElement.click();
        )
    )
</script>

【参考方案6】：

使用event.preventDefault() 而不是return false 可以解决问题。

将您的代码更改为：

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

  // ...

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

【讨论】：

像伤害一样工作！

【参考方案7】：

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

只需像这样将该类添加到您的链接元素中：<a class='dropdown-toggle'></a>，它就会切换下拉菜单。

【讨论】：

最好的办法——不需要额外的js！注意，data-toggle 属性，标识下拉列表，必须指定 - <a class='dropdown-toggle' data-toggle='dropdown-role-name'></a>

我也支持这是正确答案的观点。

【参考方案8】：

如果你有一个事件参数，就这样做：

$(element).unbind('click').bind('click', function (event)

    event.preventDefault();
    return true;
);

【参考方案9】：

不幸的是，如上所述，我没有成功使用.dropdown('toggle')...

但是起作用的是将引导程序的下拉按钮数据属性应用到它自己的下拉链接：

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

【讨论】：

这应该是选择的答案，因为这是不需要额外 JS 的正确方法。

【参考方案10】：

更简洁的解决方案，保留下拉功能并获得所需内容。

$("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");
);

【参考方案11】：

当下拉菜单打开时，您还可以添加一个透明蒙版来阻止任何其他不需要的点击：

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

带着面具：

.dropdown.open #transparent-mask
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    margin: auto;
    height: initial;
    z-index: 1000 !important;

【参考方案12】：

当点击菜单时，导航将关闭 这是使用 jquery 的简单方法 onclick="$('#mobile-menu').removeClass('mm-menu_opened');"