Javascript Bootstrap.popover（）和#x27；显示'&'；摧毁'；工作不正常

当我在“手动”模式下使用bootstrap popover时，“销毁”和“隐藏”无法正常工作。 当我使用hide and destroy时，popover opacity更改为0，但它没有将display更改为none，这导致popover容器覆盖了它下面的内容。 否则，如果我使用“toogle”模式，它工作正常

我的代码：

$('[rel="popover"]').popover({
    html: true,
    placement: 'auto',
    container: 'body',
    trigger: 'manual'
});

$('body').on('click' , '[rel="popover"]' , function(e){
    e.stopPropagation();
    $(this).popover('toggle');
});

$('body').on('click' , '.popoverClose' , function(e){
    e.stopPropagation();
    var i = $(this);
    $('.inputInfo').filter('[data-info-id="' +i.data('info-id')+ '"]').popover('hide');
});

// new code
$('body').on('click', function(){
    $('[rel="popover"]').popover('hide');
});

---

如果要隐藏popover，请使用以下选项：

$('.inputInfo').filter('[data-info-id="' +i.data('info-id')+ '"]').click();

---

我的临时解决方案如下所示：

我正在使用：

$('.popover').remove();

除去爆米花

及

---

切换弹出窗口

引导弹出窗口的工作

<span class="pop-target">
      <a href="javascript:void(0);" rel="popover"........> </a>
    </span>



  $(".pop-target a").popover('hide');

$（“.pop目标a”）.popover（'hide'）；

如果您使用的是自定义版本的引导，那么如果您没有在JS部分中勾选“transitions”，并且正在支持转换的浏览器中进行测试，则销毁事件将不起作用。这是因为引导程序在jQuery中查看$.support.transition。如果此值为“truthy”，则引导程序假定将有某种transitionEnd事件，并且在收到此事件之前不会分离popover。但是引导使用在其transitions库中定义的自定义事件，因此永远不会触发transitionEnd调用。如果您不想重新下载自定义库，转换代码如下：

我已通过在css文件中添加此代码来修复它：

.popover.fade{z-index:-1;}

.popover.in{z-index: inherit}

---

是的，我会在这种情况下工作，但当我想隐藏网站中的所有弹出窗口时（例如，当我单击body时），该怎么办？这将显示所有隐藏的弹出窗口并隐藏所有可见的窗口…看起来这正是您希望使用toggleNot所做的。确切地说，我想在关闭它时使用toggle，但当我单击任何其他网站元素时，我希望隐藏所有的弹出窗口（我添加了新的代码上限），在这种情况下它不起作用。您是否尝试更改.popover（'hide'）在新代码中添加到.click（）？是的，我尝试添加

$（'body'）。在（'click'，function（）{$（'[rel=“popover”]'）。click（）；}）的效果是，可见的popover正在隐藏和显示。如果我实现$（“.popover”）.remove（），则单击元素时popover不会出现。只有在单击外部然后单击元素时，它才会出现。有什么解决办法吗。@sms这个问题是两年前提出的，我相信你应该提出新的问题，因为更新版本的引导程序的解决方案可能会有所不同。虽然这个代码片段可以解决这个问题，但确实有助于提高你文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。
.popover.fade{z-index:-1;}

.popover.in{z-index: inherit}

//Works for hover events:

$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').mouseleave(function(e) {
    e.stopPropagation();
    $(this).find('.popover').remove();
 });