Question

当选择Bootstrap Dropdown项目或Popover关闭时，弹出的内容将被关闭。但是，也会调用父级的hide（）函数：

workbook.save("PythonTest.xlsx")

在上面的代码中，当删除下拉列表或弹出窗口时，消息将显示在控制台上。查看堆栈跟踪，对hide函数的实际调用来自jQuery。

在Bootstrap 3和4中都会发生这种情况。

反正有没有阻止这种情况发生？如果没有，有没有办法检测是否从jQuery调用hide（）？

Answer 1

不知道我们将如何阻止该事件，但它是从Bootstrap派出的。我使用了未经编辑的版本，下面是Bootstrap 4的一个片段，它生成hide事件，如chrome中的调用堆栈所示。 jQuery fires点击Bootstrap监听的窗口事件，然后为每个应隐藏的元素触发hide事件。

Dropdown._clearMenus = function _clearMenus(event) {
  if (event && event.which === RIGHT_MOUSE_BUTTON_WHICH) {
    return;
  }

  var backdrop = $(Selector.BACKDROP)[0];
  if (backdrop) {
    backdrop.parentNode.removeChild(backdrop);
  }

  var toggles = $.makeArray($(Selector.DATA_TOGGLE));

  for (var i = 0; i < toggles.length; i++) {
    var parent = Dropdown._getParentFromElement(toggles[i]);
    var relatedTarget = { relatedTarget: toggles[i] };

    if (!$(parent).hasClass(ClassName.OPEN)) {
      continue;
    }

    if (event && event.type === 'click' && /input|textarea/i.test(event.target.tagName) && $.contains(parent, event.target)) {
      continue;
    }

    var hideEvent = $.Event(Event.HIDE, relatedTarget);
    $(parent).trigger(hideEvent);
    if (hideEvent.isDefaultPrevented()) {
      continue;
    }

    toggles[i].setAttribute('aria-expanded', 'false');

    $(parent).removeClass(ClassName.OPEN).trigger($.Event(Event.HIDDEN, relatedTarget));
  }
};

Answer 2

答案是检测show.bs.popover事件中显示的弹出窗口。如果没有涉及弹出窗口，只进行隐藏。以下是上面示例中Button的代码：

$('#Button').on('show.bs.popover', function () {
  Button.popoverShowing = true;
})

Button.hide = function() {
  if (Button.popoverShowing) {
    Button.popoverShowing = false;
    return;
  }
  Button.style.display = "none";
};

Bootstrap Dropdown和Popovers调用父元素的隐藏功能

2 个答案: