0

我在选择框上有一个 Bootstrap 弹出框。如果我更改选择的值，弹出框会隐藏或显示。

  • 为什么选择会触发弹出框？
  • 这是预期的行为吗？
  • 如何防止这种情况并根据选择的状态独立显示/隐藏弹出框。

HTML：

<select>
  <option>012</option>
  <option>345</option>
  <option>678</option>
  <option>910</option>
</select>

JavaScript：

$('select').popover({
  title: 'Error',
  content: 'Error message'
});

这是JsBin 中的一个示例

4

1 回答 1

0

您需要处理popover 事件以控制它何时可见。

如果您不希望弹出窗口关闭，那真的很简单；只需在 hide 事件中返回 false ，如下所示：

$('#myPopover').on("hide.bs.popover", function() {
  return false;
});

但是，您可能希望它最终关闭。因此，我建议在控件不再具有焦点时有条件地关闭它。当控件试图隐藏时，如果控件仍有焦点，则阻止它隐藏。

然后，由于您已经处理了 close 事件，因此您必须稍后在元素的 blur 事件期间重新触发 close 事件，如下所示：

$('#myPopover').on({
  "hide.bs.popover": function() {
    if ($(this).is(":focus")) return false;
  },
  "blur": function() {
    $(this).popover('hide');
  }
});

堆栈片段中的演示。

$('#myPopover').popover({
  title: 'Custom Message',
  content: 'Something to look at while selecting'
}).on({
  "hide.bs.popover": function() {
    if ($(this).is(":focus")) return false;
  },
  "blur": function() {
    $(this).popover('hide');
  }
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">

  <select id="myPopover">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>

</div>

于 2015-05-26T21:17:50.120 回答