javascript - Twitter Bootstrap Transition Conflict prototypejs

Question

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

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

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

我已经尝试过 jQuery noConflict 但没有成功，但我们将不胜感激。如果您能给我寄回一个可以正常工作的 fiddle ，那就太好了……或者任何见解。

谢谢。 -约翰

Answer 1

您正在同时使用 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(){

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

附言

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

在 Firefox 15.0.1 中 Accordion 工作正常。

附言

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

1. this.$element.trigger('hide')(在 Collapse#transition() 中)尝试调用 $element.hide( ) 如果元素中存在方法 hide() - 那就是 by design :

   Note: For both plain objects and DOM objects, if a triggered event name matches the name of a property on the object, jQuery will attempt to invoke the property as a method if no event handler calls event.preventDefault(). If this behavior is not desired, use .triggerHandler() instead.

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

2. 在当前版本的 Chrome 和 Opera 中，过渡结束事件(webkitTransitionEnd、oTransitionEnd、otransitionend 之一)不会触发，如果元素是隐藏的(具有 display: none 样式)。 Firefox 更成功地结束了它的过渡，但也 may not fire event under some circumstances :

   Note: The "transitionend" event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.

如何解决:

1. 为 bootstrap-collapse.js 提交错误 - 它不应该 rely only on transition end event

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

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

   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();
   };