如何在关闭已打开的弹出框的同时打开弹出框

Question

我已经有一个显示事件的周视图日历（使用完整日历）。单击事件时，弹出框显示，就像我想要的那样。但是，当我单击另一个事件时，会打开一个新的弹出框，而上一个弹出框仍然可见。目前，我必须再次单击该事件才能关闭弹出窗口。我希望在新弹出框打开后自动关闭以前的弹出框。可行吗？我用于显示弹出窗口的代码如下所示。到目前为止，我已经尝试了一种"检测机制"来确定是否有任何弹出框可见，然后在显示新弹出窗口之前先关闭它们。不过，我没有运气让它工作。我似乎也无法使其他论坛（甚至是堆栈溢出论坛）的建议起作用。

日历.js

eventClick: function (calEvent, jsEvent, view) {
    var pcontent = "";
    pcontent += "<h5 class=semibold>";
    pcontent += "<img class='mr10' src='images/bloggingservices.png' width='42' height='42' />";
    pcontent += calEvent.title;
    pcontent += "</h5>";
    pcontent += "<hr/>";
    pcontent += "<p class=''><span class='ico-clock'></span> Time: ";
    pcontent += $.fullCalendar.moment(calEvent.start).format('hh:mm');
    pcontent += " - ";
    pcontent += $.fullCalendar.moment(calEvent.end).format('hh:mm');
    pcontent += "</p>";
    $('.popover.in').remove(); // adding this line works for me
    $(this).popover({
        placement: "bottom",
        html: true,
        trigger: "manual", // I already tried changing the trigger to "focus" but it didn't work
        content: pcontent
    }).popover("toggle");   

    // $(this).not(this).popover('hide');     
    }

Answer 1

您可以通过使用属性选择器获取所有弹出框元素来关闭所有弹出框，除了单击的弹出框 data-toggle="popover"，并通过将每个元素与 event.target 进行比较来隐藏除当前弹出框之外的所有弹出框 - 这将单击当前元素。

$('[data-toggle="popover"]').popover().on('click', function (e) {
    //select all popover in the page and loop through 
    $('[data-toggle="popover"]').each(function (i,item) {
        //compare each element with the current element 
        if(item != e.target)
            $(item).popover("hide");
    });
});

这不是有效的方法.仍然有利于快速解决JS小提琴演示