Question

我想在打开新的弹出窗口时关闭所有打开的弹出窗口。我试过这样：

$(document).on('click', '.close-pop', function(){
    $('.pop-over').popover('hide');
});

不幸的是，这也会关闭触发关闭操作的弹出窗口。任何的想法？感谢的！

按照巴斯的回答，我解决了我的问题如下：

$(document).on('click', '.pop-up', function(){ // each pop link has `.pop-up`, but they all have different ids
    clickid = $(this).attr('id');
    $('.pop-up').each(function(){
    if($(this).attr('id')!=clickid){ $(this).popover('hide');}
    });
});

Answer 1

为弹出窗口提供相同的类和唯一的ID。使用下面显示的功能：

<强>的javascript ：

$(function () { 
var clickid;    
$('.popoverlink').each(function(){$(this).popover({trigger:'manual'});});
$('.popoverlink').click(function() {
        if(clickid === $(this).attr('id'))return;
        clickid = $(this).attr('id');
        $('.popoverlink').each(function()
        {
                if($(this).attr('id')!=clickid){ $(this).popover('hide');}
        });

        $(this).popover('show');

    });
});

<强> HTML ：

<div class="well">  
<a href="#" class="popoverlink" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">Click for popover</a>  
</div>  

<div class="well">  
<a href="#" class="popoverlink" id="example2" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">Click for popover</a>  
</div>  

<div class="well">  
<a href="#" class="popoverlink" id="example3" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">Click for popover</a>  
</div>

Twitter Bootstrap 2.x - 当新的打开时关闭旧的弹出窗口

1 个答案: