Question

我使用您网页上演示的标记创建了Twitter Bootstrap折叠功能的小提琴：http://jsfiddle.net/Rymd7/1/

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

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

我尝试过jQuery noConflict但没有成功，但感谢任何帮助。如果你能把一个工作小提琴送给我，那将是很棒的......或任何见解。

感谢。 -John

Answer 1

您在没有jQuery.noConflict()的情况下同时使用jQuery和Prototype。之后

<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/。

P.S。

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

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

P.P.S。

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

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

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

在每个支持HTML元素原型扩展的浏览器中使用Prototype $element肯定会有hide()方法，它实际上通过设置element.style.display = 'none'来隐藏元素。
当前版本的Chrome和Opera转换结束事件（webkitTransitionEnd之一，oTransitionEnd，otransitionend）如果隐藏了元素，则不会触发（display: none风格）。 Firefox更成功地结束了它的转换，但may not fire event under some circumstances：

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

如何修复它：

提交bootstrap-collapse.js的错误 - 它不应该rely only on transition end event
提交bootstrap-collapse.js的错误 - 其hide事件与其他框架相交（至少使用Prototype，但任何其他扩展元素原型的框架都可能受到影响）。
< / LI>
暂时从Collapse#transition() 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(); };，如http://fiddle.jshell.net/ymbsr/7/所示 - 禁用事件触发或更改事件名称。
```
{{1}}
```

Answer 2

我正在使用Magento并且已经有bootstrap/ prototype problems多年了。我没有运气就尝试了以上所有方法。哈，你不会相信什么有用！

我将原型作为第一个要加载的脚本之一移动，然后将所有其他脚本保留下来。这对我有用。我不知道为什么我没有尝试过。

Twitter Bootstrap Transition Conflict prototypejs

2 个答案: