Jquery 全日制；引导：回调适用于.modal（），但不适用于.dropdown（'；toggle'；）

我正在构建一个日历应用程序，希望当用户拖动选定的时间或单击一天中的某个时间时触发上下文菜单。（在绝对位于

jsEvent.pageX、jsEvent.pageY的元素上使用引导的
.dropdown（）
）

不幸的是，出现了一个问题-下拉菜单似乎没有被正确触发。奇怪的是，
.modal（）
触发得恰到好处

我的假设是，Fullcalendar用于侦听和捕获事件以确认/呈现用户选择的代码正在阻止引导正确触发，但为什么
.modal（）
也会失败呢

非常感谢您的帮助

jsFiddle:

事实上，它被触发了两次：选择也会生成click事件，因此eventCreate（）会被调用两次，因此下拉列表会被切换两次，返回到其原始状态

如果您在click event中注释掉eventCreate（）调用，那么click和selection都会像（我认为）您期望的那样工作，因为当您单击单个单元格时，实际上是在执行单个单元格长度的选择。见：

…我观察到的是，第二次单击会再次触发相同的事件（在我看来这是正确的），但第三次不会。但我认为这是关于完整的日历插件内部

另外，请注意，当下拉列表打开时，单击不同的单元格将再次切换该单元格，从而使其关闭而不是打开。因此，您最好使用一些“打开”功能（如果存在，我没有深入研究）或在再次切换之前检查其状态。
您遇到的问题是，fullcalendar在做出选择（或日历中的任何单击）后，会触发
文档的
单击事件，这是一个问题，因为引导下拉列表的
hide
函数绑定到
$（文档）。单击（）

这里实际发生的情况是显示了您的下拉菜单，但紧接着，由于点击
document

这不是一个好的解决方案（但它可以工作）-您可以取消绑定单击文档：

$(document).unbind('click');

真的不推荐，因为你真的不知道你会搞砸什么，（真的，检查一下！）

您可以看到，我还确保在
unselect
上切换下拉列表


一个更好的解决方案是检查何时我们真的需要关闭下拉列表，如果下拉列表即将隐藏，但不应该阻止它被隐藏。为此，我们需要一个新变量来告诉我们是否需要打开下拉列表：


当选择完成时，我们需要保持开放
取消选择时-可以关闭它

这样-即使日历正在触发
$（文档）。单击（）
事件-因为我们知道我们处于
选择
状态-我们不应该隐藏菜单：

var keepDropdownOpen = false;

$('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    selectable: true,
    select: function (start, end, jsEvent, view) {
        // On select - keep the dropdown open
        keepDropdownOpen = true;
        return eventCreate(start, end, jsEvent, view); 
    },      
    dayClick: function (date, jsEvent, view) { 
        //return eventCreate(date, null, jsEvent, view); 
    },
    unselect: function (view, jsEvent) { 
        // On unselect - no need to keep the dropdown open
        keepDropdownOpen = false;
        $('.dropdown-toggle').dropdown('toggle');
    }
});
$('.dropdown').on('hide.bs.dropdown', function (e) {
    // If we should keep the dropdown open - just return false
    if (keepDropdownOpen) {
        return false;
    }
    return true;
})

工作示例：
只需停止日历中的事件传播：

document.getElementById("calendar").addEventListener("click", function (e) {
    e.stopPropagation();
});

见工作

原始单击事件将打开
下拉列表。然后事件传播，再次触发并关闭
下拉列表<代码>e.停止播放（）将阻止此行为

var keepDropdownOpen = false;

$('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    selectable: true,
    select: function (start, end, jsEvent, view) {
        // On select - keep the dropdown open
        keepDropdownOpen = true;
        return eventCreate(start, end, jsEvent, view); 
    },      
    dayClick: function (date, jsEvent, view) { 
        //return eventCreate(date, null, jsEvent, view); 
    },
    unselect: function (view, jsEvent) { 
        // On unselect - no need to keep the dropdown open
        keepDropdownOpen = false;
        $('.dropdown-toggle').dropdown('toggle');
    }
});
$('.dropdown').on('hide.bs.dropdown', function (e) {
    // If we should keep the dropdown open - just return false
    if (keepDropdownOpen) {
        return false;
    }
    return true;
})

document.getElementById("calendar").addEventListener("click", function (e) {
    e.stopPropagation();
});