jquery - 如何让 Twitter Bootstrap 与 prototype.js 一起工作？

Question

看这段代码http://jsfiddle.net/u6N6T/3/ 。 Accordion 工作正常。

但是当prototype.js加载时它就被破坏了，参见http://jsfiddle.net/jWZBD/8/ .

我关注了http://api.jquery.com/jQuery.noConflict/使 JQuery 与原型(prototype)一起工作，但即使我将 bootstrap.js 包装在“jQuery(document).ready(function($) {});”内， Accordion 也无法工作。

有没有人知道如何在加载原型(prototype)时使 Bootstrap 工作？或者我必须将所有现有的基于原型(prototype)的 javascript 转换为 JQuery？

Answer 1

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

首先，使用 $.noConflict() 并按照 ShaunOReilly 所说的操作，将 Bootstrap.js 中的所有 $ 字符替换为 jQuery。但请注意， Bootstrap 有很多以 $ 开头的变量 - 这些不是对 jQuery 的引用，而是变量名称的一部分。你不需要改变它们。我发现搜索并替换 $. 、 $( 和 $) 的实例可以解决问题。

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

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

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

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