如何通过单击另一个按钮来切换我的所有 Bootstrap 弹出框？

Question

我有一些引导弹出按钮：

<div class="bs-example tooltip-demo">
    <div class="bs-example-tooltips">
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on top</button>

        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on bottom</button>

        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on right</button>
    </div>
</div>
<br><br>
   <button id="toggle" class="btn btn-default" >Toggle all</button>

这里是脚本：

$('[data-toggle="popover"]').popover();


$('#toggle').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {

        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('toggle');
        }
    });
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {

        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

所以我想要实现的是：

• 通过单击弹出框按钮本身：什么都不做（无弹出框）
• 点击Toggle all切换所有弹出框
• 通过点击body隐藏所有Popovers

在我的代码中它不起作用，也许与隐藏和切换有冲突？

这里是小提琴：https://jsfiddle.net/C5GBU/1421/

Answer 1

假设您只希望最后一个按钮切换页面上的所有弹出框，那么您需要做的就是：

$('#toggle').on('click', function() {
    $('[data-toggle="popover"]').popover('toggle');
});

此外，如果您单击任何不是弹出框或切换弹出框的按钮，此代码将隐藏所有弹出框：

$('html').on('mouseup', function(e) {
    if(typeof $(e.target).data('toggle') === "undefined" 
       && $(e.target).attr('id') != 'toggle') {
        $('[data-toggle="popover"]').popover('hide');
    }
});

您的小提琴已更新：https://jsfiddle.net/C5GBU/1426/