5

看看这段代码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？

4

7 回答 7

6

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

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

接下来，不要加载 bootstrap-transition 插件。如果您在一个脚本中加载完整的库，请进入并删除转换功能（它位于 bootstrap.js v2.3.0 的顶部）。您将失去过渡动画，但折叠结构仍然有效。有关示例，请参见此小提琴。

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

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

window.onresize = function(event) {
   var nav = jQuery(".collapse");
   if (jQuery(window).width() > 940) nav.collapse('show');
   else nav.collapse('hide');
}
于 2013-02-23T00:02:21.890 回答
3

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

于 2014-03-20T12:28:42.077 回答
1

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

于 2013-02-26T07:56:02.290 回答
0

两种选择：

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

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

另一种选择是将原型的东西转换为 jQuery。当我可以使用 jQuery 时，我个人讨厌使用 Prototype。

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

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

于 2012-08-27T05:25:11.110 回答
0

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

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

于 2015-04-22T15:59:51.667 回答
0

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

function jQueryNoConflict()
{
    jQuery.noConflict();

    if (typeof Prototype !== "undefined" && Prototype.BrowserFeatures.ElementExtensions)
    {
        var disablePrototypeJS = function (method, pluginsToDisable)
        {
            var handler = function (event)
            {
                event.target[method] = undefined;
                setTimeout(function ()
                {
                    delete event.target[method];
                }, 0);
            };

            pluginsToDisable.each(function (plugin)
            {
                jQuery(window).on(method + '.bs.' + plugin, handler);
            });
        },

        pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover', 'tab'];
        disablePrototypeJS('show', pluginsToDisable);
        disablePrototypeJS('hide', pluginsToDisable);
    }
}
于 2015-05-20T08:31:25.900 回答
0

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

this.$element.trigger(startEvent);

和：

this.$element.triggerHandler(startEvent);

它会顺利工作

于 2016-01-20T04:56:55.860 回答