95

これは厄介です— 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を使用してフェードインするため、すべてのブラウザーで機能します。
4

24 に答える 24

178

これを試して：

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

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

$('[data-toggle="dropdown"]').parent().removeClass('open');
于 2012-06-08T00:18:33.277 に答える
27

ここからほとんどのオプションを試しましたが、どれも実際にはうまくいきませんでした。（それ$('.dropdown.open').removeClass('open');は非表示になりましたが、他のものをクリックする前にマウスオーバーすると、再び表示されました.

だから私はそれをやってしまう$("body").trigger("click")

于 2013-01-22T19:36:04.773 に答える
11 
$('.open').removeClass('open');

ブートストラップ 4 (2018 年 10 月):

$('.show').removeClass('show');
于 2014-11-03T21:55:39.510 に答える
6

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

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");
于 2015-05-11T22:05:47.153 に答える
6

$('.dropdown.open').removeClass('open');ドロップダウン メニューを非表示にする 2 行目を削除するだけです。

于 2013-01-21T06:03:15.660 に答える
6

以下に示すように、属性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>

于 2014-12-16T10:46:23.993 に答える
4

これを試して！

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

また

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

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

于 2015-12-09T22:58:14.527 に答える
4

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

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

うまくいけば、それが将来他の誰かに役立つことを願っています。

于 2012-11-19T15:46:54.477 に答える
3

ユーザーが 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);

    });
于 2012-10-18T17:52:28.843 に答える
2

ドキュメントを読み、JavaScript を使用すると、toggle メソッドを使用して実行できます。

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

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

于 2015-12-01T23:32:55.013 に答える
2 
$('.dropdown.open').removeClass('open');
于 2015-02-26T21:36:35.297 に答える
1

ボタンのドロップダウンを閉じてボタンを切り替える方法に関する私の解決策は次のとおりです。

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

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

于 2013-03-08T09:57:29.833 に答える
1

属性による選択は遅い方法です。開いているドロップダウンを非表示にする最速のソリューションは次のとおりです。

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

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

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");
于 2020-02-22T15:49:08.143 に答える
1

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>
于 2012-06-08T07:22:17.820 に答える
0

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

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});
于 2012-09-05T18:45:37.047 に答える
0

最も簡単な方法：

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })
于 2016-11-13T09:05:10.423 に答える
0

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

于 2015-04-13T03:37:58.230 に答える