76

ブートストラップドロップダウン内にフォームを配置しましたが、フォームのいずれかのフィールドをクリックすると、ドロップダウンが消えます。このコードはありますが、ドロップダウンが消えないようにどこに配置すればよいかわかりません。

$(function test() {
  // Setup drop down menu
  $('.dropdown-toggle').dropdown();

  // Fix input element click problem
  $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
  });
});

誰かがこれをどこに置くべきか教えてもらえますか？ブートストラップドロップダウンで試しました。HTML内で試しましたが、それでも機能しません。

4

9 に答える 9

125

ドロップダウン呼び出しをすべて一緒に省略できます。ブートストラップドロップダウンはドロップダウンなしで機能します。スクリプトを適切にラップしていることを確認してください。個人的にはページの本文に配置することを好みますが、ページのヘッダーまたは本文にスクリプトを含めることができます。

JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>
于 2012-06-02T16:59:17.527 に答える
10

ドロップダウンメニューのすべてではなく一部のみを閉じるのをやめたい場合は、ulブロックにクラスを追加するだけです。

<ul class="dropdown-menu keep-open-on-click">

そして、このコードを使用します：

$(document).on('click', '.dropdown-menu', function(e) {
    if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
于 2015-12-29T20:57:51.760 に答える
9

回答が受け入れられてから時間が経過しましたが、ドロップダウンを開いたままにしておきたい場合、それが一種のダイアログのように機能する場合、私が考える最善の方法は次のとおりです。

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });
于 2014-03-18T08:18:24.343 に答える
8

イベントがDOMツリーをバブリングするのを防ぐ必要があります。

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

event.stopPropagationは、イベントが最終的にBootstrap非表示メニューによって処理されるノードに到達するのを防ぎます。

于 2016-12-24T11:02:10.990 に答える
6

これは私の場合に機能します（ブートストラップトグルで単純なリンクを開く横方向のサイドバー）

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});
于 2014-07-02T21:48:22.130 に答える
4

上記の回答をありがとうございます。ドロップダウンメニューの下にサブメニューがあるのと同じ問題が発生していました。上記の解決策を使用して、私はこれについても問題を解決することができました。

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});
于 2013-03-25T16:12:38.330 に答える
4

置く

<script type="text/javascript">
    $('.dropdown-menu').click(function(e) {
          e.stopPropagation();
    });
</script>

元の答えで、すべてのクラスを削除し、「。dropdown-menu」クラスを配置するだけで、うまくいきました。ドロップダウンメニュー内に入力フィールドがあります。

メニューのスクリーンショット

于 2014-12-12T08:07:16.697 に答える
4

ドロップダウンウィジェットのソースの下部を見ると、次のように表示されます。

$(document)
  .on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
    e.stopPropagation()
  })

したがって、次の選択肢があります。

  1. ドロップダウンをフォームでラップするだけです
  2. または、 .dropdownYOUR_SELECTORのクリックイベントのイベントリスナーを追加できます
$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })
于 2016-02-03T03:30:12.503 に答える
4

この例を使用するだけです。このソリューションは私にとってはうまくいきます。

<script type="text/javascript">
window.addEvent('domready',function() {    
   Element.prototype.hide = function() {
      $(function () { 
        // replace your tab id with myTab
        //<ul id="myTab" class="nav nav-tabs">
        $('#myTab li:eq(1) a').tab('show');
      });      
   };
});
</script>

お役に立てば幸いです。ありがとう。

于 2016-04-02T15:35:50.913 に答える