web-dev-qa-db-ja.com

Bootstrapオフになったときにドロップダウンを開く

ドロップダウンが表示されている場合、ドロップダウンの外側をクリックして閉じます。閉じないようにする必要があります。

ドキュメントから：

プラグインを開くと、メニューの外側をクリックしたときにドロップダウンメニューを閉じるためのクリック領域として。dropdown-backdropも追加されます。

ドロップダウンが閉じないようにするには、どのJavaScriptを追加できますか？

javascriptjquerytwitter-bootstraptwitter-bootstrap-3drop-down-menu
34
kleban

Bootstrapdropdown ドキュメントのイベントセクションから：

_hide.bs.dropdown_：このイベントは、インスタンスの非表示メソッドが呼び出されるとすぐに発生します。

まず、ドロップダウンが閉じないようにするために、このイベントをリッスンし、falseを返すことで処理を停止できます。

_$('#myDropdown').on('hide.bs.dropdown', function () {
    return false;
});
_

完全なソリューションを得るには、ドロップダウン自体がクリックされたときに閉じることを許可したいでしょう。そのため、一部の時間のみ、ボックスが閉じないようにします。

これを行うには、ドロップダウンによって発生するさらに2つのイベントで .data() フラグを設定します。

  • _shown.bs.dropdown_-表示されたら、.data('closable')をfalseに設定します
  • click-クリックすると、.data('closable')をtrueに設定します

したがって、_hide.bs.dropdown_イベントがドロップダウンのclickによって発生した場合、クローズを許可します。

jsFiddleのライブデモ

JavaScript

_$('.dropdown.keep-open').on({
    "shown.bs.dropdown": function() { this.closable = false; },
    "click":             function() { this.closable = true; },
    "hide.bs.dropdown":  function() { return this.closable; }
});
_

[〜＃〜] html [〜＃〜]（クラス_keep-open_をドロップダウンに追加したことに注意）

_<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#" class="btn btn-primary"
            data-toggle="dropdown" data-target="#" >
        Dropdown <span class="caret"></span>
    </button>

    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
_
93
KyleMit

いくつかの依存関係のバージョンの変更により、KyleMitおよび他のほとんどのソリューションが機能しなくなりました。さらに掘り下げてみると、何らかの理由でBootstrapがhide.bs.dropdownを試みて失敗し、その後にhide.bs.dropdownを呼び出すと、click()]が送信されます。ドロップダウンメニュー全体ではなくボタン自体で強制的にclick()を閉じることで、この問題を回避しました。

Bootplyのライブデモ

JavaScript

$('.keep-open').on({
    "shown.bs.dropdown": function() { $(this).attr('closable', false); },
    //"click":             function() { }, // For some reason a click() is sent when Bootstrap tries and fails hide.bs.dropdown
    "hide.bs.dropdown":  function() { return $(this).attr('closable') == 'true'; }
});

$('.keep-open').children().first().on({
  "click": function() {
    $(this).parent().attr('closable', true );
  }
})

HTML

<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#" data-toggle="dropdown" data-target="#" class="btn btn-primary">
        Dropdown <span class="caret"></span>
    </button>

    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
14
Mike Kane
$('.dropdown.keep-open').on({
    "shown.bs.dropdown": function() { this.closable = true; },
    "click":             function(e) { 
        var target = $(e.target);
        if(target.hasClass("btn-primary")) 
            this.closable = true;
        else 
           this.closable = false; 
    },
    "hide.bs.dropdown":  function() { return this.closable; }
});
body {
    margin: 10px;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#"
       data-toggle="dropdown" data-target="#" 
       class="btn btn-primary">
        Dropdown <span class="caret"></span>
    </button>
    
    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" 
        aria-labelledby="dLabel">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/19740121/1366033'>Keep dropdown menu open</a><br/>
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
    Bootstrap Documentation: <a href='http://getbootstrap.com/javascript/#dropdowns'>Dropdowns</a><br/>
<div>
3
bhavik

新しいjsを必要としないソリューションを見つけました。ドロップダウンを使用せず、代わりにbootstrap collapseを使用してください。ドロップダウンのようにスタイルするには、いくつかのドロップダウンクラスを使用します。

<div class="dropdown">
    <button class="dropdown-toggle" type="button" data-toggle="collapse" data-target="#myList">Drop Down
    <span class="caret"></span></button>
    <div id="myList" class="dropdown-menu">
        <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
        <input type="checkbox" name="vehicle" value="Car"> I have a car<br></div>
2
andrew dibiasio

上記のKyleMittのソリューションを組み合わせて使用​​し、これをFootableオブジェクト内で使用すると問題が発生しました（これはテーブルの動的な作成によるものだと思います）。最上位の.dropdown .divに.keep-openを適用しました。

$('#contact_table').on("click", '.keep-open', function () {
    this.closable = false;
});

$('#contact_table').on("shown.bs.dropdown", '.keep-open', function () {
    this.closable = true;
});
$('#contact_table').on("hide.bs.dropdown", '.keep-open', function () {
    let ret = this.closable;
    this.closable = true;
    return ret;
});

このコードの機能により、外部をクリックしてドロップダウンを閉じることができますが、その中のアイテムをクリックすると、開いたままになります。これに関する提案/コメントがある場合はお知らせください。編集を試みます。

1
Honga

これに対する他のソリューション。 .dropdown-menu内をクリックした後、ドロップダウンを開いたままにします。

$('.heading .options .dropdown').on({
    "shown.bs.dropdown":function(){this.closable = true;},
    "click":            function(e){
        var target = $(e.target);
        var d = target.data();
        if(typeof d.toggle != 'undefined' && d.toggle == 'dropdown')
            this.closable = true;
        else {
            var p = target.parent();
            var dd = p.data();
            if(typeof dd.toggle != 'undefined' && dd.toggle == 'dropdown')
                this.closable = true;
            else {
                if(target.hasClass('dropdown-menu'))
                    this.closable = false;
                else {
                    var pp = target.parent('.dropdown-menu');
                    if(typeof pp != 'undefined')
                        this.closable = false;
                    else
                        this.closable = true;
                }
            }
        }
    },
    "hide.bs.dropdown": function(){return this.closable;}
});
0
Tomasz Majerski

.dropdown-menu内をクリックした後、ドロップダウンを開いたままにします

  $(document.body).on({
    "shown.bs.dropdown": function(){ this.closable = true; },
    "hide.bs.dropdown": function(){ return this.closable; },
    "click": function(e){ this.closable = !$(e.target).closest(".dropdown-menu").length; },
  },".dropdown.keepopen");
0
Arron Mabrey