我使用您页面上演示中有效的标记为 Twitter Bootstrap 的折叠功能创建了一个 fiddle :http://jsfiddle.net/Rymd7/1/
然后有一次,我添加了对 prototypejs 折叠功能的引用,在单击几次后停止在每个 Accordion 组上工作。 http://jsfiddle.net/p5SAy/1/我不确定问题是什么或如何纠正。
这是 Bootstrap 问题还是有办法解决这个问题并让这两个 js 库存在于同一页面上?
我已经尝试过 jQuery noConflict 但没有成功,但我们将不胜感激。 如果您能给我寄回一个可以正常工作的 fiddle ,那就太好了……或者任何见解。
谢谢。 -约翰
最佳答案
您正在同时使用 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 工作正常。
附言
这种奇怪的行为是两个特征的结果:
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来隐藏元素。显示 = '无'
。在当前版本的 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.
如何解决:
为
bootstrap-collapse.js
提交错误 - 它不应该 rely only on transition end event为
bootstrap-collapse.js
提交错误 - 它的hide
事件与其他框架相交(至少与 Prototype 相交,但任何其他框架扩展元素原型(prototype)可能会受到影响)。从
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(); };
关于javascript - Twitter Bootstrap Transition Conflict prototypejs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12715254/