javascript - 选择器菜单不会关闭

Question

我用 bootstrap 创建了一个简单的下拉菜单，并在其中放置了一个选择器菜单。

当我点击选择菜单时，一切正常。但是，如果我不从选择菜单中选择任何内容并在 Bootstrap 下拉菜单外单击，菜单将保留。

有什么想法可以让选择菜单在下拉菜单关闭时也关闭吗？

参见代码示例:https://jsfiddle.net/yw0cw028/

    <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

兴趣点:

为了关闭呈现的选择，点击它然后点击对话框外，你需要监听对话框隐藏事件:

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