防止自举功能切换下拉列表

Question

我将自举导航栏转换为工具栏并修改了一个下拉列表（实际上是dropup）以包含2个datepicker元素：

问题是，当我选择日期时，下拉列表会崩溃。我的解决方案（我向其他人开放）是创建一个函数，通过添加类'open'并将该函数添加到datepicker close（）函数中来打开下拉列表。

function leaveOpen(){
  $("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
  $("#rangeDropdown").addClass('open');
}(jQuery);

此功能正常工作，但还有另一个引导功能可以将'open'类切换回来：

Dropdown.prototype.toggle = function (e) {
var $this = $(this)
if ($this.is('.disabled, :disabled')) return
var $parent  = getParent($this)
var isActive = $parent.hasClass('open')
clearMenus()

if (!isActive) {
  ...
  var relatedTarget = { relatedTarget: this }
  $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
  ...
  $this
    .trigger('focus')
    .attr('aria-expanded', 'true')

  $parent
    .toggleClass('open')
    .trigger('shown.bs.dropdown', relatedTarget)
}

我对这个JavaScript有点不知所措。 我可以添加什么来添加 leaveOpen（）以防止'open'类在'Dropdown.prototype.toggle = function（e）'中切换吗

Answer 1

检查出来：https://jsfiddle.net/hoffmanc/y6sho3nv/9/

AFAIK需要两个预防机制：

1）单击日期选择器文本字段时停止隐藏下拉列表：

$('.datepicker').on('click', function (e) {
    e.stopPropagation();
});

  

参考：https://stackoverflow.com/a/8178945/338303

2）单击日历本身中的日期后停止隐藏下拉列表：

$('.dropdown').on('hide.bs.dropdown', function (e) {
    if($('.datepicker-dropdown').length > 0) {
        return false;
    }
});

  

参考：https://stackoverflow.com/a/19797577/338303