加载prototype.js时我的javascript失败，如何修复？

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

Prototype.js：

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

$(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();
    }
);
});

---

实际网站：

您正在使用jQuery，因此您需要使用

，因为您已经使用jQuery，然后选择一个。添加一个像Prototype这样的独立库对于一个简单的任务来说是过分的，所以要避免它。如果您已经在使用Prototype，那么出于同样的原因，我建议您避免添加jQuery。

您可以编辑代码以使其更具可读性吗？请尝试将其加载到JSFIDLE上，然后以更简洁的格式发布。这一直都会被问到。让我去挖一个副本。也可能是：我试着放jQuery.noConflict（）；就在我上面发布的代码上方，但它没有解决任何问题：S@BiserKrustev，因为您继续滥用

$

。花点时间阅读我链接到的页面并更改代码。