如何在打开另一个时隐藏一个 bootstrap-popover？

Question

(bootstrap 4)

大家好，我正在努力做到这一点，当您在外部单击时 "popover" - 它（弹出窗口）隐藏了（有点像我做的）。在这样做的同时，我还尝试在单击另一个（第二个）日历事件（Fullcalendar 中的 "eventClick" 事件）和另一个事件的外观时制作第一个弹出窗口的 "disappearance"。但是我不明白该怎么做。

P. S. 如果仅当事件为 "eventClick"（FullCalendar 的事件）时显示弹出窗口，则弹出窗口仅在第二次单击后出现，对于每个事件。

代码：Codepen.io

或：

HTML:

<body>
<ul id="popover-content" class="list-group" style="display: none">
    <a href="#" id="Eventaaa" class="list-group-item" onclick="aaa();">aaa</a>
    <a href="#" id="Eventbbb" class="list-group-item" onclick="bbb();">bbb</a>
    <a href="#" id="Eventccc" class="list-group-item" onclick="ccc();">ccc</a>
</ul>
<div id='calendar'></div> ...

JS:

$(document).ready(function() {
$("#calendar").fullCalendar({
    header: {
        left: "prev,next today",
        center: "title",
        right: "month,agendaWeek,agendaDay,listDay"
    },
    themeSystem: "bootstrap4",
    locale: "ru-RU",
    defaultDate: "2018-03-12",
   ...
        eventRender: function(event, element, view) {
        element.popover({
            animation: true,
            placement: "auto",
            html: true,
            container: "#calendar",
            title: event.title,
            trigger: "click",
            content: function() {
                return $("#popover-content").html();
            }
        });
    },
    editable: true,
    eventLimit: true,
 ...
$("body").on("click", popoverCloseByOutsideClick);

function popoverCloseByOutsideClick(e) {
    var isNotPopover = !$(e.target).hasClass('.popover'), isNotPopoverChild = ($(e.target).parents('.popover').length === 0), isNotEvent=!$(e.target).hasClass('.fc-event-container'), isNotEventChild = ($(e.target).parents('.fc-event-container').length === 0);
    // if (!isNotEvent || !isNotEventChild) {
    //     // console.log($(e.target));
    //     // closePopovers();
    //     // e.target.popover('hide');
    //     // $(e.target).popover('show');
    // }
    if (isNotPopover && isNotPopoverChild && isNotEvent && isNotEventChild) {
        closePopovers();
    }
}

function closePopovers()
{
    $.each($(".popover"), function(i, el) {
            if ($(el).hasClass("show")) $(el).removeClass("show");
    });
}

P.S.2 英文如有不妥请见谅

Answer 1

要关闭任何之前打开的弹出窗口，您可以调用 .popover('hide'):

element.popover({
    animation: true,
    placement: "auto",
    html: true,
    container: "#calendar",
    title: event.title,
    trigger: "click",
    content: function() {
        // for each opened popover...hide it
        $("#calendar .popover.show").popover('hide');
        //                   ^^^^^
        return $("#popover-content").html();
    }
});

Answer 2

element.popover({
                    animation: true,
                    placement: "auto",
                    html: true,
                    container: "#calendar",
                    title: event.title,
                    trigger: "click",
                    content: function() {
                        $('.popover').popover('hide')
                         return $("#popover-content").html();
                    }
                });

如何在打开另一个时隐藏一个 bootstrap-popover？

How to hide one bootstrap-popover when opening another?

javascript

jquery

bootstrap-4

fullcalendar

bootstrap-popover