防止引导功能切换下拉菜单答案

【问题标题】：Prevent bootstrap function from toggling dropdown防止引导功能切换下拉菜单
【发布时间】：2015-07-17 19:33:01
【问题描述】：

我将引导导航栏转换为工具栏，并修改了下拉菜单（实际上是下拉菜单）以包含 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)' 中切换?

【问题讨论】：

jsfiddle 那只野兽！
我已经能够重现我认为您遇到的情况：jsfiddle.net/hoffmanc/y6sho3nv/6

标签： javascript jquery twitter-bootstrap drop-down-menu toggleclass

【解决方案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

【讨论】：