Question

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

// calendar.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 =＆＃34; popover＆＃34; 并隐藏所有弹出框除外当前的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 FIDDLE DEMO

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

1 个答案: