Twitter Bootstrapドロップダウンを非表示にする方法

これは面倒になっています—ブートストラップドロップダウンの項目をクリックしても、ドロップダウンが閉じません。ドロップダウン項目をクリックしたときにFaceboxライトボックスを開くように設定していますが、問題があります。

私が試したこと

アイテムがクリックされたとき、私はこれを試してみました：

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

それはそれを隠しますが、その後、何らかの理由で再び開かなくなります。

ご覧のように、ドロップダウンを開いたままにしz-indexておくと不安定に見えるため（主にドロップダウンのがFaceboxモーダルボックスオーバーレイよりも高いため）、ドロップダウンを閉じる必要があります。

Bootstrapの組み込みモーダルボックスを使用しない理由

Bootstrapに組み込まれた見栄えの良いモーダルボックスをなぜ使用しないのか不思議に思っているのは、次の理由によります。

1. AJAXでコンテンツをロードする方法はありません。
2. モーダルでは毎回HTMLを入力する必要があります。Faceboxを使用すると、簡単なことができます。$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. CSS3アニメーションを使用してアニメーション化します（これは非常に美しく見えます）が、CSS3以外のブラウザでは表示されるだけで、それほど美しくはありません。FaceboxはJavaScriptを使用してフェードインするため、すべてのブラウザーで機能します。

これを試して：

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

これもあなたのために働くかもしれません：

$('[data-toggle="dropdown"]').parent().removeClass('open');

ここからほとんどのオプションを試してみましたが、実際にはどれも私にとってはうまくいきませんでした。（それ$('.dropdown.open').removeClass('open');はそれを隠しましたが、何か他のものをクリックする前にマウスオーバーした場合、それは再び現れました。

だから私はそれをやろうとしている $("body").trigger("click")

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

ブートストラップ4（2018年10月）：

$('.show').removeClass('show');

これは、以下に示すように、属性data-toggle = "dropdown"をアンカータグに追加することで、JavaScriptコードを記述せずに実行できます。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

$('.dropdown.open').removeClass('open');ドロップダウンメニューを非表示にする2行目のみを削除する必要があります。

これは私のために働いたものです：

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

選択した答えはうまくいきませんでしたが、Bootstrapの新しいバージョンが原因であると考えています。私はこれを書いてしまいました：

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

うまくいけば、それが将来誰かに役立つことでしょう。

これを試して！

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

または

$(clicked_element).trigger("click");

それはいつも私のために働きます。

ユーザーがdivから出た場合、このメソッドを使用すると、ユーザーにサブメニューが表示されるまでに一定の遅延が生じるため、なぜ私の方法を使用するのですか。これは、superfishプラグインを使用するのと同じです。

1）最初にホバーインテントJavaScriptをダウンロード

ここにリンク：ホバーインテントJavaScript

2）ここに実行する私のコードがあります

$(document).ready(function(){

        var config = {    
            over: showBootrapSubmenu,   
            timeout: 500,
            out: hideBootrapSubmenu  
        };

        function showBootrapSubmenu(){  
             $(this).addClass('open');
        }
        function hideBootrapSubmenu(){  
          $(this).removeClass('open');
            }

        //Hover intent for Submenus
        $(".dropdown").hoverIntent(config);

    });

$('.dropdown.open').removeClass('open');

ドキュメントを読み、JavaScriptを使用するには、トグルメソッドを使用します。

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

あなたはそれについて読むことができます：http : //getbootstrap.com/javascript/#dropdowns-methods

Bootstrap ModalでHTMLを開こうとすると、次のコードを使用します。

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
}); 

リンクは次のようになります：

<a href="#my_page" data-toggle="modal">PAGE</a>

これがボタンのドロップダウンを閉じてボタンを切り替える方法に関する私の解決策です：

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

「this」はボタングループのグローバルコンテナです。

ブートストラップ4.1：

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');

これは私のために働きました、私はnavbarといくつかのプルダウンメニューを持っていました。

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

これを行う最も簡単な方法は、非表示ラベルを追加することです。

<label class="hide_dropdown" display='hide'></label>

次に、ドロップダウンを非表示にするたびに、次を呼び出します。

$(".hide_dropdown").trigger('click');

これが誰かに役立つかどうかはわかりませんが（おそらく私の質問に固有であり、この質問には固有ではありません）、私にとってこれはうまくいきました：

$('.input-group.open').removeClass('open');

クリック後：

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

アンカータグでclass = "dropdown-toggle"を使用し、アンカータグをクリックすると、ブートストラップドロップダウンが閉じます。

ちょっと、この単純なjQueryトリックが役立つはずです。

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

簡単な方法：

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

このコードを現在のイベントハンドラーで使用できます

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

私のシナリオでは、ajax呼び出しが完了したときに使用しました

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

属性による選択は遅い方法です。開いたドロップダウンを非表示にする最も速い解決策は次のとおりです。

$(".dropdown-menu.show").parent().dropdown("toggle");

または、.dropdown-menuが次の子要素でない場合は、次を使用します（最も近い親ドロップダウンコントロールを見つけます）。

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");

これは振り返って追加された可能性があります（ただし、その機能は、Bootstrap 4.3.1でも文書化されていません ）。パラメーターを指定して呼び出すだけで済みます。必ずトグラー要素で呼び出してください。そのようです：hide

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

もちろん、これはと逆に機能しshowます。