Bootstrap .popover()'show'和'destroy'无法正常工作

Question

当我在'手动'模式下使用bootstrap popover'destroy'和'hide'不能正常工作时.当我使用hide和destroy时,popover opacity更改为0,但不会将显示更改为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');
});

Answer 1

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

我正在使用:

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

删除popovers

和

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

    var i = $(this);
    var thisPopover = $('.popoverClose').filter('[data-info-id="' +i.data('info-id')+ '"]').closest('.popover');        
    if( thisPopover.is(':visible') ){
        $('.popover').remove();
    }
    else{
        $(this).popover('show');
    }
});

切换弹出窗口