4

我使用您页面上有效的演示中的标记为 Twitter Bootstrap 的 Collapse 功能创建了一个小提琴：http: //jsfiddle.net/Rymd7/1/

然后有一次，我添加了对prototypejs的引用，折叠功能在单击几次后停止在每个手风琴组上工作。 http://jsfiddle.net/p5SAy/1/ 我不确定问题是什么或如何纠正它。

这是一个引导问题还是有办法解决这个问题并使这两个 js 库存在于同一页面上？

我试过 jQuery noConflict 没有成功，但任何帮助表示赞赏。如果你能给我寄回一个很棒的工作小提琴……或者任何见解。

谢谢。-约翰

4

2 回答 2

17

您正在同时使用 jQuery 和 Prototype 而没有jQuery.noConflict(). 后

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0/prototype.js"></script>

此行导致 javascript 错误：

$(window).load(function(){

修改后的小提琴： http: //fiddle.jshell.net/ymbsr/5/ -在不同的浏览器中打开http://fiddle.jshell.net/ymbsr/5/show/ 。

附言

删除 jQuery/Prototype 冲突后，我可以看到 Chrome 21 和 Opera 12.02 手风琴转换永远不会结束（bootstrap-collapse.js Collapse.transition启动转换但从complete()未被调用）。对同一元素的进一步调用将Collapse.show()/hide()在 之后退出if (this.transitioning) return。

在 Firefox 15.0.1 中，手风琴工作正常。

聚苯乙烯

这种奇怪的行为是两个特征的结果：

  1. this.$element.trigger('hide')(in Collapse#transition()) 尝试调用元素中是否存在$element.hide()方法- 这是设计使然：hide()

    注意：对于普通对象和 DOM 对象，如果触发的事件名称与对象上的属性名称匹配，如果没有事件处理程序调用 event.preventDefault()，jQuery 将尝试将该属性作为方法调用。如果不需要此行为，请改用 .triggerHandler() 。

    在每个支持 HTML 元素的浏览器中使用 Prototype 元素原型扩展$element肯定会有hide()方法，它实际上是通过设置隐藏元素element.style.display = 'none'。

  2. 在当前版本的 Chrome 和 Opera 中，如果元素被隐藏（具有样式） ，则不会触发过渡结束事件（webkitTransitionEnd、oTransitionEnd、之一）。Firefox 更成功地结束了它的转换，但在某些情况下也可能不会触发事件：otransitionenddisplay: none

    注意：如果过渡被中止，则不会触发“transitionend”事件，因为动画属性的值在过渡完成之前已更改。

如何修复它：

  1. 提交错误bootstrap-collapse.js- 它不应仅依赖于过渡结束事件

  2. 提交一个错误bootstrap-collapse.js- 它的hide事件与其他框架相交（至少与 Prototype 有交叉，但任何其他扩展元素原型的框架可能会受到影响）。

  3. Collapse#transition()从http://fiddle.jshell.net/ymbsr/7/bootstrap-collapse.js临时修补- 禁用事件触发或更改事件名称。

    jQuery.fn.collapse.Constructor.prototype.transition = function (method, startEvent, completeEvent) {
  var that = this
    , complete = function () {
        if (startEvent.type == 'show') that.reset();
        that.transitioning = 0;
        that.$element.trigger(completeEvent);
      }
  //this.$element.trigger(startEvent);
  //if (startEvent.isDefaultPrevented()) return;
  this.transitioning = 1;
  this.$element[method]('in');
  (jQuery.support.transition && this.$element.hasClass('collapse')) ?
      this.$element.one(jQuery.support.transition.end, complete) :
      complete();
};
于 2012-10-04T10:29:16.897 回答
0

我正在使用 Magento，并且多年来一直存在引导程序/原型问题。我没有运气就尝试了以上所有方法。哈你不会相信什么有效！

我将原型作为要加载的第一个脚本之一，并让所有其他脚本在之后加载。这对我有用。我不知道为什么我没有早一点尝试。

于 2016-04-01T20:29:48.367 回答