twitter-bootstrap - 显示一个弹出窗口并隐藏其他弹出窗口

Question

我有几个按钮，每个按钮都需要一个弹出框。当我的用户单击其中之一时，我希望隐藏其他按钮，以便只显示一个弹出窗口。请帮我纠正这个例子:

var mycontent='<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'
 

$('.btn').popover({
    html: true,
    content:mycontent,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

$('html').click(function(e) {
     $('.btn').popover('hide');
});

我的html:

<ul>
    <li>
        <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>
    </li>
    <li>
       <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a> 
    </li>
</ul>

jsfiddle example

添加类似下面的代码的内容以某种方式解决了我的问题:

$('.btn').click(function(e) {
     $('.btn').popover('hide');
});

但是在每个按钮上单击两次后，就会出错!

Answer 1

我根据自己的需要创建了一个示例。我使用了这段代码:

$('.btn').popover();

$('.btn').on('click', function (e) {
    $('.btn').not(this).popover('hide');
});

检查demo here

...并且我更正了之前的demo .