web-dev-qa-db-ja.com

リンクをクリックしてからBootstrapドロップダウンを閉じます

下にbootstrapドロップダウンメニューがあります。これには、knockout.jsバインディングにリンクされたリンクがあります。＃タグをブラウザーのURLに送信したくないので、falseを返します。ただし、リンクをクリックしてもドロップダウンメニューは閉じません。とにかくこれの周り？

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;
        });
    }
};
javascripttwitter-bootstrapdrop-down-menuknockout.jsevent-propagation
45
Mike Flynn

リンクにクラスを付けます（ダウンロードなど）：

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

これは、新しいクラスやIDを追加することなく、既存のbootstrapマークアップで実際に機能します。うまくいけば、これは既存のものを変更せずにソリューションをドロップしたいだけの誰かに役立つでしょう。

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

これは、ブートストラップ独自のCSSクラスdropdown-toggleで実現できます

<a class='dropdown-toggle'></a>のようにリンク要素にそのクラスを追加するだけで、ドロップダウンが切り替わります。

19
nullwriter

これにより、ページ上のすべてのドロップダウンと展開されたナビゲーションメニューが閉じられると思います。

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

return falseの代わりにevent.preventDefault()を使用するとうまくいきます。

コードを次のように変更します。

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

  // ...

  return true; // or just remove the return clause
});
5
Fábio Batista

残念ながら、上記のように.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はなく、それは魅力のように機能しました:)

5
Jesse Novotny

クリックイベントで（falseの代わりに）href="#"をhref="javscript:void(0);"に、次にreturn trueに変更するだけです。

4
Rich

ドロップダウン機能を維持し、探しているものを取得する、よりクリーンなソリューション。

$("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");
});
1
Raúl Cantú

イベントパラメータがある場合は、次のようにします。

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

ドロップダウンが開いているときに他の不要なクリックをブロックする透明マスクを追加することもできます。

   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;
}
0
daniel gi

最良の答えは、クリックを実行して、ユーザーがマウスをクリックしてドロップダウンメニューを非表示にするのと同じ動作をすることです。これを行うには、このスナップコードをページに追加します。

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