Question

是否有可能有一个bootstrap（v3）popovers在页面加载开始时加载它的div并且在切换时不会被销毁？

我在div中有一个popover内容：

<div id="popoverContent">
<h1>Stuff</h1>
<p>I'm in a popover!</p>
</div>

还有一个切换弹出窗口的按钮：

<a id="floating_tab" data-toggle="popover" data-placement="left">Button</a>

这是我的Javascript代码，用于处理按钮推送：

<script>
var x = false;
$('[data-toggle=popover]').popover({
    content: $('#popoverContent').html(),
    html: true
}).click(function() {
  if (x) {
      $(this).popover('hide');
      x = false;
  }
  else {
    $(this).popover('show');
    x = true;
  }
});
</script>

问题是，当调用$(this).popover('show');时，会创建一个div。像这样的东西出现在inspect元素（chrome）中：

<div class="popover fade left in" role="tooltip" id="popover460185" style="top: 430.5px; left: 2234px; display: block;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">
  <h1>Stuff</h1>
  <p>I'm in a popover!</p>
</div></div>

但是当再次单击该按钮时，整个div本身将被删除并从页面中删除。是否可以在页面加载期间创建popover div（虽然隐藏），并且可以在不删除div的情况下进行切换？

Answer 1

正如评论中所述，Bootstrap 3目前无法实现.Popover（它是Tooltip的扩展）是在show上动态创建的，并且从jQuery.detach分离（使用hide） $(function () { var content = $('#popover-content'), // Pre defined popover content. popover = $('#popover-anchor').popover(); popover.on('inserted.bs.popover', function () { var instance = $(this).data('bs.popover'); // Replace the popover's content element with the 'content' element instance.$tip = content; }); popover.on('shown.bs.popover', function () { var instance = $(this).data('bs.popover'); // Remove the reference to 'content', so that it is not detached on hide instance.$tip = null; }); popover.on('hide.bs.popover', function () { // Manually hide the popover, since we removed the reference to 'content' content.removeClass('in'); content.addClass('out'); }); });上的DOM。

最好是推出自己的JavaScript并简单地使用Bootstrap的CSS。但是，您可以使用Popover的事件API轻松修补功能 - 以下内容可用作起始位置：

{{1}}

Codepen

Bootstrap popovers可以不被破坏吗？

1 个答案: