单击closures时保持引导程序下拉菜单打开
如果下拉列表可见，并且在closures的下拉列表之外单击。 我需要它不closures。
从文档：
打开时，插件还会添加.dropdown-backdrop作为单击区域，以在菜单外单击时closures下拉菜单。
我可以添加什么JavaScript来防止closures下拉菜单？
从Bootstrap dropdown文档的事件部分：
hide.bs.dropdown：当调用隐藏实例方法时立即触发此事件。
对于初学者来说，为了防止closures下拉菜单，我们可以只听这个事件，并阻止它返回false ：
$('#myDropdown').on('hide.bs.dropdown', function () { return false; });
要获得完整的解决scheme，您可能希望在单击下拉本身时允许closures该解决scheme。 所以只有一些时候我们要防止盒子closures。
要做到这一点，我们将在下拉菜单中设置两个更多事件中的.data()标志：
-
shown.bs.dropdown– 显示时，我们将.data('closable')为false -
click– 当点击时，我们将.data('closable')为true
因此，如果hide.bs.dropdown事件是通过click下拉提出的，我们将允许closures。
在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 （注意我已经添加了类下拉菜单）
<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>
某些依赖项的版本更改导致KyleMit和其他大多数解决scheme不再有效。 我深入了一点，出于某种原因，当Bootstrap尝试时发送click()而hide.bs.dropdown失败，然后再调用hide.bs.dropdown 。 我通过强制closuresclick()出现在button本身上，而不是整个下拉菜单中来解决这个问题。
在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>
$('.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>
我find了一个解决scheme，不需要新的js。 不要使用下拉菜单，而是使用引导程序折叠。 我仍然使用一些下拉式类似下拉式的样式。
<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>
其他的解决scheme。 点击里面后，保持下拉菜单。下拉菜单：
$('.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;} });
点击里面的.dropdown菜单后，保持下拉菜单打开
$(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");
