單擊關閉時保持 Bootstrap 下拉菜單打開

Question

如果下拉菜單可見，我在下拉菜單外單擊它會關閉。 我需要它不關閉。

從文檔：

打開時，插件還會添加.dropdown-backdrop作為單擊區域，用於在菜單外單擊時關閉下拉菜單。

我可以添加什么 JavaScript 來防止下拉菜單關閉？

Answer 1

從Bootstrap dropdown文檔的事件部分：

hide.bs.dropdown ：當調用 hide 實例方法時，會立即觸發此事件。

對於初學者來說，為了防止下拉菜單關閉，我們可以只監聽這個事件並通過返回false阻止它繼續：

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

---

對於完整的解決方案，您可能希望在單擊下拉菜單本身時允許它關閉。 所以只有在某些時候我們會想要阻止盒子關閉。

為此，我們將在下拉列表引發的另外兩個事件中設置.data()標志：

• shown.bs.dropdown - 顯示時，我們將.data('closable')為false
• click - 單擊時，我們將.data('closable')為true

因此，如果通過click下拉菜單引發了hide.bs.dropdown事件，我們將允許關閉。

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>

Answer 2

某些依賴項中的版本更改導致 KyleMit 和大多數其他解決方案不再有效。 我深入研究了一下，出於某種原因，當 Bootstrap 嘗試並失敗hide.bs.dropdown ，會發送click() ，然后再次調用hide.bs.dropdown 。 我通過強制關閉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>

Answer 3

 $('.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>

Answer 4

我找到了一個不需要新js的解決方案。 不要使用下拉菜單，而是使用 bootstrap 折疊。 我仍然使用一些下拉類將其設置為下拉樣式。

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

Answer 5

我設法結合使用上面的 KyleMitt 解決方案，並在 Footable 對象中使用它時遇到了問題（我相信這是由於表格的動態創建）。 我將 .keep-open 應用於頂層的 .dropdown .div 。

$('#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;
});

此代碼的功能允許您單擊外部以關閉下拉列表，但單擊其中的項目將使其保持打開狀態。 如果您對此有任何建議/意見，請告訴我，我會嘗試進行編輯。

Answer 6

Mike Kane 的解決方案大部分時間都有效，但有一種情況是hide.bs.dropdown事件在click()事件之前觸發，導致下拉菜單在它應該關閉的時候沒有關閉。

我想出了另一種方法來檢查事件中的clickEvent對象。 我最初的計划是向上 DOM 並檢查clickEvent目標是否是下拉列表的子項，但發現如果您在下拉列表中單擊clickEvent是未定義的，如果您在它外面單擊，則事件是一個對象.

所以這只是一個簡單的檢查clickEvent是否作為一個對象存在。

$('.dropdown.keep-open').on({
    "hide.bs.dropdown":  function(e) {
        return (typeof(e.clickEvent) != 'object');
    }
});

Answer 7

其他解決方案。 單擊內部 .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;}
});

Answer 8

單擊內部 .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");

Answer 9

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