javascript - 在触发日历单击事件之前，div 标记内的 JQuery 完整日历不会显示

Question

我有一个页面，在 div 标签内显示不同的部分(图像、日历、信息等)。 div 标签的隐藏和显示取决于页面左侧点击的导航链接。当我进入页面时，日历 div 被隐藏，然后我单击日历链接以显示日历，页面出现，但日历不存在，日历按钮可见，但没有日历。单击日历按钮后，日历就会出现。下面发布了图片。当选择日历 div 标签并隐藏所有其他 div 并显示日历 div 时，我是否需要刷新页面/调整大小或执行其他操作？

这里的第一张图片是我第一次进入页面时的，第二张是我点击月份按钮后的。

这是包含日历代码的 div

<div id="eventcalendar">
    <div id='calendar' style="width:65%"></div>
</div>

这是单击导航链接时隐藏/显示日历 div 的代码。

$("#calendarlink").click(function() {
    $("#eventcalendar").show();
    $("#images").hide();
    $("#listing").hide();
    $("#overview").hide();
    $("#details").hide();
    $("#address").hide();
    $("#map").hide();
    $('#calendar').fullCalendar('refresh'); //these don't show calendar
    $('#calendar').fullCalendar('rerenderEvents'); //these don't show calendar
});

这是呈现日历的代码(位于 $(document).ready(function () {}) 内

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'agendaDay',
    editable: true,
    allDaySlot: false,
    selectable: true,
    slotMinutes: 15
});

注意:如果我在页面首次打开时显示日历，那么日历就会显示。此处显示。

$(document).ready(function () {
$("#overview").show();
$("#details").hide();
$("#listing").hide();
$("#address").hide();
$("#map").hide();
$("#images").hide();
$("#eventcalendar").show();

Answer 1

重新排列您的功能，以便在非隐藏 div 上激活日历，然后将其隐藏。

像日历这样的一些元素不喜欢在隐藏的 div 上激活...最好在普通的 div 上激活它们然后隐藏它们;)