0

这是我第一次使用这个库,我遇到了一个非常奇怪的问题。我正在使用独立的 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 时,它都会删除工具提示(很明显),并且还会隐藏与该步骤相关的突出显示的元素,并带有“显示:无”。它不应该隐藏我的元素,不是吗?

我发现避免这种情况的唯一方法是放置以下代码:

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')”,它会按预期工作,但是当单击 End tour 它不会删除步骤工具提示,因此它不是解决方案。

知道发生了什么吗?

4

1 回答 1

0

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

基本上,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 隐藏事件。

现在它按预期工作。

于 2015-04-21T12:11:12.030 回答