加载prototype.js时我的javascript失败，如何解决？答案

【问题标题】：My javascript fails when I load prototype.js, how to fix it?加载prototype.js时我的javascript失败，如何解决？
【发布时间】：2012-02-02 21:15:20
【问题描述】：

我正在尝试为朋友的夏季购物车系统进行新设计。系统通常有出现/消失的子类别菜单，但后来我下载了一个名为“灯箱”的 javascript 插件，它在当前窗口中显示图像，同时保留页面，而不是打开一个新窗口来显示图像。现在的问题是，这个“灯箱”插件有一个名为“prototype.js”的文件，导致子类别无法正常工作......

Prototype.js：http://www.mediafire.com/?sj3xzdw2gchmca0

使子菜单出现/消失的代码：

$(function () {
var stepOver = 20; // The number of pixels of the upper box that are going to cover its parent.
    $("#DropdownCategories ul li").hover(
    function () {
        var firstUls = $(this).find('ul:first');
        firstUls.show();    
                var positionLeft = $(this).position().left - stepOver + $(this).outerWidth();
        var offsetLeft = $(this).offset().left - stepOver + $(this).outerWidth();   
    // Find the position that the box is going to end in.
        var wouldEnd = offsetLeft + firstUls.outerWidth();
                    // If the box ends out of the body we move the box on the left side.
        if (wouldEnd > $('body').innerWidth()) {
            positionLeft = $(this).position().left - firstUls.outerWidth() + stepOver;
        }
                    firstUls.css('position', 'absolute')
            .css('top', $(this).position().top + 'px')
            .css('left', positionLeft + 'px');
    },
    function () {
        $(this).find('ul:first').hide();
    }
);
});

实际网址：http://www.sladurko.com/product/277/bluza-kas-rakav.html

【问题讨论】：

您可以编辑代码以使其更具可读性吗？
尝试将其加载到 jsfiddle 上，然后以更整洁的格式发布。
这个问题一直被问到。让我去挖一个骗局。
jQuery & Prototype Conflict的可能重复
另外：stackoverflow.com/questions/3128427/jquery-prototype-conflict

标签： javascript jquery prototypejs lightbox

【解决方案1】：

您使用的是 jQuery，因此您需要使用 noConflict

【讨论】：

我试着把 jQuery.noConflict();就在我上面发布的代码上方，但它没有解决任何问题：S
@BiserKrustev，因为你继续滥用$。花点时间阅读我链接到的页面并更改您的代码。

【解决方案2】：

由于您已经使用 jQuery，因此请选择 jQuery compatible lightbox plugin。添加一个像 Prototype 这样的完整的独立库对于一个简单的任务来说太过分了，所以避免它。如果您已经在使用 Prototype，那么出于同样的原因，我建议您避免添加 jQuery。

【讨论】：