twitter-bootstrap 在引导程序按钮下拉菜单中显示引导程序选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25443347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show bootstrap-select inside bootstrap button dropdown
提问by SiberianGuy
I use Bootstrap button dropdown to show a form. I have disabled dropdown disappearing onclick (while user manipulates the form) by calling stopPropagation. One of the elements of the form is a dropdownlist. If I use a native html select element everything is okay (except is looks ugly). If I replace it with bootstrap-select (which imitates select by divs), I can not select a value (as there is not enough place in the button dropdown). I tried to apply a workaround to specify container: 'body'for bootstrap-select. It helps to see dropdownlist values but button dropdown is closed when I select the element (I guess it happens as boostrap-select belongs to body which is higher then button dropdown to which click-propagation is applied).
我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用stopPropagation. 表单的元素之一是下拉列表。如果我使用本机 html select 元素，一切都很好（除了看起来很丑）。如果我将它替换为 bootstrap-select（模仿 div 选择），我将无法选择一个值（因为按钮下拉列表中没有足够的位置）。我尝试应用一种解决方法来指定container: 'body'引导选择。它有助于查看下拉列表的值，但是当我选择元素时按钮下拉是关闭的（我猜这是因为 boostrap-select 属于 body 高于应用点击传播的按钮下拉）。
<div class="btn-group">
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
Take <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<form>
<select id="mySelect" class="selectPicker">
<option>1</option>
</select>
</form>
</li>
</ul>
</div>
<script type="text/javascript">
$('.dropdown-menu').click(function(e) {
e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
});
$('.selectpicker').selectpicker({container: 'body'});
</script>
回答by jme11
The button menu dropdown closes upon selecting any of the options because essentially, it jumps over your stopPropagation since the select container is set to the body. You'll need to add a bit of javascript to check if the event.target(the element that dispatched the event in the first place) was one of the bootstrap-select elements. If the event.target is one of the bootstrap-select "option" elements, then you'll want to stopPropagation. You'll notice though that this will also prevent the bootstrap-select from closing, so you can just do that manually by removing the open class from the element with the bootstrap-selectclass.
按钮菜单下拉菜单在选择任何选项时关闭，因为本质上，它跳过了您的 stopPropagation，因为选择容器设置为主体。您需要添加一些 javascript 来检查event.target（首先调度事件的元素）是否是 bootstrap-select 元素之一。如果 event.target 是 bootstrap-select“选项”元素之一，那么您将需要stopPropagation. 您会注意到，这也将阻止引导选择关闭，因此您可以通过从具有该类的元素中删除打开的类来手动执行此操作bootstrap-select。
DEMO
演示
JQUERY:
查询：
$('.dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$('.selectpicker').selectpicker({
container: 'body'
});
$('body').on('click', function(event) {
var target = $(event.target);
if (target.parents('.bootstrap-select').length) {
event.stopPropagation();
$('.bootstrap-select.open').removeClass('open');
}
});
HTML:
HTML：
<div class="btn-group">
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
Take <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<form>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</form>
</li>
</ul>
</div>
回答by Sebsemillia
I changed your function a bit and tested in Chrome and FF.
我稍微更改了您的功能并在 Chrome 和 FF 中进行了测试。
$("ul.dropdown-menu").on("click", "form", function(e) {
e.stopPropagation(); });
