Закрыть раскрытие Bootstrap после ссылки

У меня есть раскрывающееся меню бутстрапа ниже. У него есть ссылка, связанная с привязкой 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>

привязка 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()....

И ваш выпадающий идентификатор (например, dlDropDown):

<button class="btn dropdown-toggle" id="dlDropDown" data-toggle="dropdown" data-bind="enable: !noResults()">

Затем добавьте следующий обработчик событий:

$("a.download").click(function() {
   $("#dlDropDown").dropdown("toggle");
});

Ответ 2

Это будет работать с существующей разметкой начальной загрузки без необходимости добавлять новые классы или идентификаторы. Надеюсь, это полезно для кого-то, кто просто хочет отказаться от решения, не изменив ничего существующего.

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

Ответ 3

Это может быть достигнуто с помощью собственного стиля CSS boottraps dropdown-toggle

Просто добавьте этот класс к вашим элементам ссылок, например: <a class='dropdown-toggle'></a>, и он переключит выпадающее меню.

Ответ 4

Я думаю, что это закроет все выпадающие списки и расширенные navmenus на странице:

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

Ответ 5

Просто измените href="#" на href="javscript:void(0);", а затем return true на событие click (вместо false).

Ответ 6

Использование event.preventDefault() вместо return false делает трюк.

Измените свой код на:

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

  // ...

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

Ответ 7

Я, к сожалению, не имел успеха, используя .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, и он работал как шарм:)

Ответ 8

Если у вас есть параметр события, просто выполните:

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

Ответ 9

Чистое решение, чтобы сохранить функциональность выпадающего списка и получить то, что вы ищете.

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

Ответ 10

лучший ответ будет состоять в том, чтобы выполнить щелчок, чтобы он действовал так же, как пользователь, щелкнув мышью, чтобы скрыть раскрывающееся меню, чтобы сделать это, добавьте этот snap-код на свою страницу:

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