Question

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

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

HTML ：

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

的JavaScript ：

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

这是example in JsBin

Answer 1

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

如果你不想让弹出窗关闭，那真的很简单;只需在隐藏事件上返回false，如下所示：

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

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

然后，由于您已经处理了关闭事件，因此您必须稍后在元素的模糊事件中重新触发关闭事件，如下所示：

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

Stack Snippets中的演示。

＆＃13;

$('#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');
  }
});

＆＃13;

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

＆＃13;

选择更改时，Bootstrap popover显示/隐藏

1 个答案:

Stack Snippets中的演示。