Question

这是我第一次使用这个库而且我遇到了一个非常奇怪的问题。我使用的是独立的v0.10.1版本。

这是我的代码：

var tour = new Tour({ 
    backdrop: true,
    debug: true,
    steps: [
        {
            element: '#myResourcesMenu',
            title: "Title of my step",
            content: "Content of my step",
            placement: "bottom"
        },
        {
            element: '.access-unit-button:not(.disabled)',
            title: "Title of my step",
            content: "Content of my step"
        }
    ],
    onHidden: function(tour) {
        jQuery(tour.getStep(tour._current).element).show();
    }
});

每次我点击prev / next / end tour时，它会删除工具提示（显然）并隐藏，“display：none”，我突出显示的元素与步骤相关。它不应该隐藏我的元素，不是吗？

我发现避免这种情况的唯一方法就是输入以下代码：

onHidden: function(tour) {
    jQuery(tour.getStep(tour._current).element).show();
}

我还查看了bottstrap-tour代码，并在hideStep函数中找到了引起此问题的行：

$element.popover('destroy').removeClass("tour-" + _this._options.name + "-element tour-" + _this._options.name + "-" + i + "-element");

如果我删除“popover（'destroy'）”，它会按预期工作，但是当点击结束游览时，它不会删除步骤工具提示，因此它不是解决方案。

知道发生了什么事吗？

Answer 1

经过一天的研究，我发现了这里发生了什么。

基本上，PrototypeJS库与Bootstrap不兼容，Bootstrap Tour正在使用它的Tooltip类。

在这里您可以看到原因： https://github.com/twbs/bootstrap/issues/6921

我刚才所做的就是评论这一行：

Tooltip.prototype.hide = function () {
  var that = this
  var $tip = this.tip()
  var e    = $.Event('hide.bs.' + this.type)

  this.$element.removeAttr('aria-describedby')

  function complete() {
    if (that.hoverState != 'in') $tip.detach()
    that.$element.trigger('hidden.bs.' + that.type)
  }

  //this.$element.trigger(e) // THIS ONE

  if (e.isDefaultPrevented()) return

  $tip.removeClass('in')

  $.support.transition && this.$tip.hasClass('fade') ?
    $tip
      .one('bsTransitionEnd', complete)
      .emulateTransitionEnd(150) :
    complete()

  this.hoverState = null

  return this
}

这可以避免触发PrototypeJS隐藏事件。

现在它按预期工作。

Bootstrap Tour删除每个步骤的突出显示元素

1 个答案: