单击链接后关闭引导下拉列表

Close Bootstrap Dropdown after link click

本文关键字：下拉列表 链接 单击      更新时间：2023-09-26

我在下面有一个引导下拉菜单。 它有一个链接到 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" alt="@exportUrl.Key.GetDisplayName()"/> @exportUrl.Key.GetDisplayName()</a>
            </li>
        }
    </ul>
</div>

敲门.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。希望这对其他人有所帮助，只是希望在不更改任何现有内容的情况下放弃解决方案。

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

可以通过引导自己的CSS类dropdown-toggle

来实现

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

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

$('.in,.open').removeClass('in open');
不幸的是，

如上所述，我没有成功使用.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，它就像一个魅力:)

使用 event.preventDefault() 而不是 return false 就可以了。

将代码更改为：

$(element).unbind('click').bind('click', function(e) {
  e.preventDefault();
  // ...
  return true; // or just remove the return clause
});

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

如果你有一个事件参数，只需做：

$(element).unbind('click').bind('click', function (event)
{
    event.preventDefault();
    return true;
});

一个更干净的解决方案，以保留下拉功能并获得所需的内容。

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

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

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

您还可以添加透明蒙版，以在下拉列表打开时阻止任何其他不需要的点击：

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

当单击菜单时，导航将关闭这是使用jQuery执行此操作的简单方法onclick="$（'#mobile-menu'）.removeClass（'mm-menu_opened'）;"

我有一个较晚的答案，可能对某人有所帮助。答案发布在 2023 年，我的机器中有bootstrap-5。假设您有一个下拉按钮和下拉菜单，

要在单击后关闭菜单，

<a href="#" class="dropdown-toggle" data-bs-auto-close="true">

要保留菜单，

<a href="#" class="dropdown-toggle" data-bs-auto-close="outside">
相关文章：