打开另一个时如何隐藏一个引导弹出窗口？答案

【问题标题】：How to hide one bootstrap-popover when opening another?打开另一个时如何隐藏一个引导弹出窗口？
【发布时间】：2019-01-15 18:19:04
【问题描述】：

（引导程序 4）

大家好，我正在努力做到这一点，以便当您在“弹出框”外部单击时 - 它（弹出框）被隐藏（有点像我做的那样）。在这样做的同时，我还试图在单击另一个（第二个）日历事件（Fullcalendar 中的“eventClick”事件）和另一个出现时使第一个弹出窗口“消失”。但我不明白该怎么做。

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 如果有问题，请原谅我的英语。

【问题讨论】：

标签： javascript jquery bootstrap-4 fullcalendar bootstrap-popover

【解决方案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();
    }
});

【讨论】：

谢谢，这很容易！ 我能否请教一下关于我实现第一个目标的充分性和正确性？（单击外部时关闭弹出框）

【解决方案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();
                    }
                });

【讨论】：