Twitter Bootstrap Transition Conflict prototypejs

Question

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

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

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

我已经尝试过jQuery noConflict但没有成功,但任何帮助都表示赞赏.如果你能把一个工作小提琴送给我,那将是很棒的......或任何见解.

谢谢.-约翰

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(){

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

PS

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

在Firefox 15.0.1手风琴中工作正常.

PPS

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

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

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

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

2. 在当前版本的Chrome和Opera转换结束事件(其中之一)中webkitTransitionEnd,如果隐藏元素(具有样式)oTransitionEnd,otransitionend则不会触发display: none.Firefox更成功地结束了它的转换,但在某些情况下也可能不会触发事件:

   注意:如果转换中止,则"transitionend"事件不会触发,因为动画属性的值在转换完成之前已更改.

如何解决:

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

2. 提交一个错误bootstrap-collapse.js- 它的hide事件与其他框架相交(至少使用Prototype,但任何其他扩展元素原型的框架都可能受到影响).

3. 暂时修补Collapse#transition()从bootstrap-collapse.js在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();
   };