Question

查看这段代码http://jsfiddle.net/u6N6T/3/。手风琴正常工作。

但是加载prototype.js时它会被破坏，请参阅http://jsfiddle.net/jWZBD/8/。

我跟着http://api.jquery.com/jQuery.noConflict/使JQuery与原型一起工作，但是即使我将bootstrap.js包装在“jQuery（document）.ready（function（$）{}）”中，手风琴也不能正常工作;“

有没有人知道在加载原型时让Bootstrap工作的方法？或者我必须将所有现有的基于原型的javascripts转换为JQuery？

Answer 1

有同样的问题。我无法解决它，但我找到了解决方法。

首先，使用$.noConflict()并按照ShaunOReilly的说法进行操作，并将$替换为Bootstrap.js中的所有jQuery个字符。但请注意，引导程序在开始时有很多以$命名的变量 - 这些变量不是对jQuery的引用，而是变量名称的一部分。您无需更改它们。我发现搜索和替换$.，$(和$）的实例可以解决问题。

接下来，不要加载bootstrap-transition插件。如果要在一个脚本中加载完整的lib，则进入并删除转换函数（它位于bootstrap.js v2.3.0顶部）。您将丢失过渡动画，但崩溃结构仍然有效。有关示例，请参阅this fiddle。

这将修复用户交互的切换行为，但自动切换仍将被破坏 - 例如在页面调整大小时显示/隐藏导航菜单。要解决这些问题，只需实现自己的事件监听器并直接调用您需要的任何引导函数。请参阅api以供参考。

例如，为了解决页面调整大小的导航栏问题，我使用了以下代码：

window.onresize = function(event) {
   var nav = jQuery(".collapse");
   if (jQuery(window).width() > 940) nav.collapse('show');
   else nav.collapse('hide');
}

Answer 2

对于那些使用PrototypeJS的开发人员，Bootstrap需要使用jQuery。如果您不想加载另一个库来处理Bootstrap交互，请使用此Bootstrap分支：https://github.com/jwestbrook/bootstrap-prototype

Answer 3

这不是理想的，但你可以编写CSS3手风琴代码并绕过所有的jQuery混乱......在这里看到一个：Accordion with CSS3

Answer 4

两个选项：

用自定义文件替换twitter js文件中的所有内容，并用“jQuery”替换所有$字符

如果这是唯一的问题，你可以编写自己的手风琴切换功能。

另一种选择是将Prototype的东西转换为jQuery。当我可以使用jQuery时，我个人不喜欢使用Prototype。

以下是类似问题的另一个例子： jQuery & Prototype Conflict

或者可以在这里找到可能的解决方案： http://www.dynamicdrive.com/forums/showthread.php?29309-Content-Glider-and-Lighbox-Conflict

Answer 5

我知道这是一个老问题，但我尝试了那里找到的所有建议都无济于事。对我有用的是稍微改变原型库以过滤某些Bootstrap事件 - 比如这里 -

https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554

Answer 6

This article让我对使用Prototype的Bootstrap的潜在问题有所了解。那里给出的解决方法实际上运作良好。我稍微调整了第一个，并添加了一个检查Prototype是否实际加载并将其组合在一个jQueryNoConflict（）中作为标准jQuery.noConflict（）的替代：

Binding

Answer 7

如果您使用的是bootstrap.js，请替换：

this.$element.trigger(startEvent);

使用：

this.$element.triggerHandler(startEvent);

它会顺利运作

如何让Twitter Bootstrap与prototype.js一起使用？

7 个答案: