web-dev-qa-db-ja.com

Bootstrapクリックするとドロップダウンが閉じます

bootstrapドロップダウン内にフォームを配置しましたが、フォーム内のフィールドのいずれかをクリックすると、ドロップダウンが消えます。私はこのコードを持っていますが、ドロップダウンが消えないようにどこに置くべきかわかりません。

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

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

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

javascripthtml5drop-down-menutwitter-bootstrap
76
Sorin Cioban

この例を使用するだけです。この解決策は私には有効です。

<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>

それが役立つことを願っています。ありがとう。

4
Shiplu

ドロップダウンコールをすべて省略できます。bootstrapドロップダウンはそれなしでも機能します。スクリプトを適切にラッピングしていることを確認し、ページのヘッダーまたは本文に含めることができますが、個人的にはページの本文に配置することを好みます。

JS

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

すべてのドロップダウンメニューではなく、一部のドロップダウンメニューのみを閉じたくない場合は、追加のクラスを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(); }
});
10
oleg

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

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });
9
lavrik

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

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

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

8
Vishnu T Asok

これは私のために機能します（側面のサイドバーはbootstrapトグルで簡単なリンクを開きます）

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});
5
manuelprojects

上記の答えをありがとう、ドロップダウンメニューの下のサブメニューで同じ問題が発生していました。上記のソリューションを使用して、この問題も解決することができました。

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});
4
usugarbage

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

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

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

  1. 単にドロップダウンをformで囲む
  2. または、。dropdown YOUR_SELECTORのクリックイベントのイベントリスナーを追加できます。
$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })
4
Timofey Novitskiy

プット

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

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

Screenshot of menu

4
River CR Phoenix