9

我使用 Bootstrap 按钮下拉菜单来显示表单。我已经通过调用禁用下拉菜单消失 onclick（当用户操作表单时）stopPropagation。表单的元素之一是下拉列表。如果我使用本机 html 选择元素，一切都很好（除了看起来很丑）。如果我用 bootstrap-select 替换它（它模仿 div 的选择），我无法选择一个值（因为按钮下拉列表中没有足够的位置）。我尝试应用一种解决方法来指定container: 'body'引导选择。它有助于查看下拉列表值，但是当我选择元素时按钮下拉列表关闭（我猜它发生在 boostrap-select 属于主体，它高于应用点击传播的按钮下拉列表）。

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

2 回答 2

13

选择任何选项后，按钮菜单下拉菜单都会关闭，因为本质上，它会跳过您的 stopPropagation，因为选择容器设置为主体。您需要添加一些 javascript 来检查event.target（首先调度事件的元素）是否是 bootstrap-select 元素之一。如果 event.target 是引导选择“选项”元素之一，那么您将需要stopPropagation. 您会注意到，这也会阻止 bootstrap-select 关闭，因此您可以通过从带有bootstrap-select类的元素中删除 open 类来手动执行此操作。

演示

查询：

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

<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>
于 2014-08-24T18:57:57.707 回答
1

我稍微更改了您的功能并在 Chrome 和 FF 中进行了测试。

$("ul.dropdown-menu").on("click", "form", function(e) {
    e.stopPropagation(); });

工作示例

于 2014-08-22T09:14:11.837 回答