Question

我创建了一个带引导程序的简单下拉菜单，并在其中放入了一个selectpicker菜单。

当我点击选择菜单时，一切正常。但是，如果我没有从选择菜单中选择任何内容并在引导下拉列表外单击，则菜单会保留。

我知道如何在下拉菜单关闭时让选择菜单关闭？

    <div class="dropdown">
  <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">test</button>
  <div class="dropdown-menu">
    <div style="height:150px; width:250px">
      <select name="test" class="selectpicker" data-size="3">
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
      </select>
    </div>
    <div>
      <button class="btn btn-xs btn-primary" type="submit">Change</button>
    </div>
  </div>
</div>

<script>
  $('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
  });

  $('.selectpicker').selectpicker({
    container: 'body',
    dropupAuto: false
  });

  $('body').on('click', function(event) {
    var target = $(event.target);
    if (target.parents('.bootstrap-select').length) {
      event.stopPropagation();
      $('.bootstrap-select.open').removeClass('open');
    }
  });

</script>

Answer 1

尝试将其添加到脚本部分的底部

  $('ul > li').on('click', function() {
    $('.dropdown').dropdown('toggle');
  })

Answer 2

您可以通过停止传播来自＆＃34;下拉菜单＆＃34;的子项的事件来实现此目的。并在其他任何地方点击打开菜单。希望这会有所帮助。

$('.dropdown-menu').on('click', function(event) {
     event.stopPropagation();
     $('.bootstrap-select.open').removeClass('open');
     }).find('.btn-group').on('click', function(event) {
        event.stopPropagation();
  });

 $('.selectpicker').selectpicker({
    container: 'body',
    dropupAuto: false
 });

 $('body').on('click', function(event) {
    var target = $(event.target);
    if (target.parents('.bootstrap-select').length) {
        event.stopPropagation();
        $('.bootstrap-select.open').removeClass('open');
    } 
});

小提琴：https://jsfiddle.net/yw0cw028/8/

Answer 3

兴趣点：

为了关闭渲染的选择，点击它然后在对话框外单击，你需要监听对话框隐藏事件：

 $('.dropdown').on('hide.bs.dropdown', function() {

你的方法（$（'body'）。on（'click'，function（event）{...）是错误的。

要关闭渲染的选择，您可以删除打开的类：

$('.bootstrap-select.open').removeClass('open');

有必要更改功能：

$('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

因为如果您单击了选择选择器，则必须使用此功能进行跟踪。

所以代码片段（您更新的jsfiddle是：HERE）：

// take track if you clicked in the dialog inside the selectpicker area
var selectpickerIsClicked = false;

$(function () {
  $('.selectpicker').selectpicker({
    container: 'body',
    dropupAuto: false
  });

  $('.dropdown-menu').on('click', function (e) {
    if ($(e.target).closest('.bootstrap-select.open').is(':visible') || $(e.target).closest('.btn.dropdown-toggle.btn-default').is(':visible')) {
      selectpickerIsClicked = true;
    }
  });

  // when the dialog is closed....
  $('.dropdown').on('hide.bs.dropdown', function (e) {
    if (selectpickerIsClicked) {
      e.preventDefault();
      selectpickerIsClicked = false;
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="dropdown">
    <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">test</button>
    <div class="dropdown-menu">
        <div style="height:150px; width:250px">
            <select name="test" class="selectpicker" data-size="3">
                <option value="1">Test 1</option>
                <option value="2">Test 2</option>
                <option value="3">Test 3</option>
            </select>
        </div>
        <div>
            <button class="btn btn-xs btn-primary" type="submit">Change</button>
        </div>
    </div>
</div>

Selectpicker菜单不会关闭

3 个答案: