IE的JavaScript问题

大约6个月前，我建立了一个网站，并使用jQuery设计了一个具有交互性的菜单。它在我的朋友（Firefox、Safari等）中非常有效

事实证明，现在IE7和IE8不是在玩球

IE中的错误指向带有

无效参数的jQuery（在Google的CDN上）

可以查看该页面。将鼠标移到顶部标题上，查看Firefox中应该发生什么。这在IE7/8中没有发生

下面是我的效果的源代码

String.prototype.safe = function() {
    var string = this;
    string = string.toLowerCase().replace(/\s/g, '-');
    string = string.replace(/&/g, 'and'); // & appears as just &
    return string;
}

var subMenu = {
    activeMenuId: 'submenu-about-us',
    hideDelay: null,
    init: function(){
        var self = this;
        $('#header').append('<div id="sub-menu"></div><div id="hover"></div>');
        $('#background-elements').append('<span></span>');

        var $subMenu = $('#sub-menu');
        var $hover = $('#hover');

        $('#menu li ul').each(function(){
            var id = 'submenu-' + $(this).parents('li').find('.inner').text().safe();
            $(this).attr({
                id: id
            }).prependTo($subMenu);
        });

        // move slider to where it should be

        var uri = document.location.pathname;

        uri = uri.replace(PATH_BASE + '/', '')

        var uriSegments = uri.split('/');

        var currentCategory = uriSegments[0];

        if (currentCategory) {

            var uriSegmentToListIndex = {};

            uriSegmentToListIndex['about-us'] = 0;
            uriSegmentToListIndex['tenant-advice-and-advocacy'] = 1;
            uriSegmentToListIndex['housing-services'] = 2;
            uriSegmentToListIndex['tenants'] = 3;
            uriSegmentToListIndex['applicants'] = 4;
            uriSegmentToListIndex['housing-development-projects'] = 5;
            uriSegmentToListIndex['news-and-publications'] = 6;
            uriSegmentToListIndex['contact'] = 7;

            var currentListItemIndex = uriSegmentToListIndex[currentCategory];

            var sliderDropShadowOffset = 14;

            if (currentListItemIndex) {

                var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset;
            }

            $hover.css({
                left: sliderLeft + 'px'
            });

            this.activeMenuId = 'submenu-' + currentCategory;

            // make the right sub menu appear

            $subMenu.find('ul').hide();
            $('#submenu-' + currentCategory).fadeIn(500);
        }




        $('#menu li .inner').parents('li').hoverIntent(function(){

            var id = 'submenu-' + $(this).find('.inner').text().safe();

            if (id != self.activeMenuId) {

                self.activeMenuId = id;

                $subMenu.find('ul').hide();

                var newLeft = $(this).position().left + sliderDropShadowOffset; // offset for drop shadow



                $hover.animate({
                    left: newLeft + 'px'
                }, 500, function(){
                    $subMenu.find('ul').hide(); // sometimes some remain
                    $('#' + id).fadeIn(800);

                });

            }



        }, function(){
            // do nothing!

        });


    }



}

String.prototype.safe=函数（）{
var string=this；
string=string.toLowerCase（）.replace（/\s/g，'-'）；
string=string.replace（/&/g，'and'）；//&；显示为&
返回字符串；
}
变量子菜单={
ActiveMenud:“关于我们的子菜单”，
hideDelay:null，
init:function（）{
var self=这个；
$（'#页眉'）。附加（''）；
$（“#背景元素”）。追加（“”）；
var$子菜单=$（“#子菜单”）；
var$hover=$（“#hover”）；
$（'#menu li ul'）。每个（函数（）{
var id='submenu-'+$（this.parents（'li'）.find（'.inner'）.text（）.safe（）；
$（this.attr）({
id:id
}).prependTo（$子菜单）；
});
//将滑块移动到它应该所在的位置
var uri=document.location.pathname；
uri=uri.replace（路径_BASE+'/'，''）
var uriSegments=uri.split（'/'）；
var currentCategory=uriegments[0]；
if（当前类别）{
var uriSegmentToListIndex={}；
uriSegmentToListIndex['about-us']=0；
uriSegmentToListIndex['tenant-advice-and-adviction']=1；
uriSegmentToListIndex['housing-services']=2；
uriSegmentToListIndex['租户]]=3；
UriegmentToListIndex[‘申请人’]=4；
uriSegmentToListIndex['housing-development-projects']=5；
uriSegmentToListIndex['news-and-publications']=6；
uriSegmentToListIndex['contact']=7；
var currentListItemIndex=uriSegmentToListIndex[currentCategory]；
var sliderDropShadowOffset=14；
if（currentListItemIndex）{
var sliderLeft=$（'#menu>li:eq（'+currentListItemIndex+'））.position（）.left+sliderDropShadowOffset；
}
$hover.css({
左：滑块左+‘px’
});
this.activeMenuId='子菜单-'+当前类别；
//使右子菜单出现
$subMenu.find（'ul'）.hide（）；
$（“#子菜单-”+currentCategory）.fadeIn（500）；
}
$（'#menu li.inner'）.parents（'li'）.hoverIntent（function（））{
变量id='子菜单-'+$（this.find（'.inner'）.text（）.safe（）；
if（id！=self.activeMenuId）{
self.activeMenuId=id；
$subMenu.find（'ul'）.hide（）；
var newLeft=$（this）.position（）.left+sliderDropShadowOffset；//放置阴影的偏移量
$hover.animate({
左：新左+‘px’
}，500，函数（）{
$subMenu.find（'ul'）.hide（）；//有时会保留一些
$（'#'+id）.fadeIn（800）；
});
}
}，函数（）{
//什么都不要做！
});
}
}

我尝试过常见的嫌疑犯，尝试过IE8开发工具，但还没有弄明白这一点。所以我转向堆栈溢出社区：）

有人知道这个问题吗？
您正在使用jQuery 1.3.1，这是一个较旧版本的jQuery，可能通过添加最新版本的jQuery来解决这个问题。
您正在使用jQuery 1.3.1，这是一个较旧版本的jQuery，并可能通过添加最新版本的jQuery来解决此问题。
IE 8上的这一行出现错误：

$hover.css({
    left: sliderLeft + 'px'
});

sliderLeft变量从未初始化，因为
currentListItemIndex
为0：

if (currentListItemIndex) {
    var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset;
}

>> currentListItemIndex
0

>> sliderLeft
undefined

已更新

IE 8有一个非常好的内置调试器（最后）：

通过转到工具->高级并取消选中“禁用脚本调试（Internet Explorer）”选项，确保未禁用它

当浏览器点击页面上的错误时，您将收到一个对话框，询问是否要运行调试器。确保选中了“在Internet Explorer中使用内置脚本调试器”选项。点击“是”启动调试器

很多时候，jQuery代码在传递意外值时会出错。这在一开始并不是很有帮助，因为问题很少是jQuery的错误，而且大多数时候代码都被最小化了。您将需要在调试器中选择“调用堆栈”选项卡，然后按照堆栈上的调用进行操作，直到找到导致问题的代码。这就是为什么我能在你的剧本中找到准确的台词

您可以使用Console、Locals和Watch选项卡来运行某些脚本或查看错误发生时正在使用的变量（如currentListItemIndex和sliderLeft变量）的当前状态

IE 8上的这一行出现错误：

$hover.css({
    left: sliderLeft + 'px'
});

sliderLeft变量从未初始化，因为
currentListItemIndex
为0：

if (currentListItemIndex) {
    var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset;
}

>> currentListItemIndex
0

>> sliderLeft
undefined

已更新

IE 8有一个非常好的内置调试器（最后）：

通过转到工具->高级并取消选中“禁用脚本调试（Internet Explorer）”选项，确保未禁用它

当浏览器点击页面上的错误时，您将收到一个对话框，询问是否要运行调试器。确保选中了“在Internet Explorer中使用内置脚本调试器”选项。点击“是”启动调试器

很多时候，jQuery代码在传递意外值时会出错。这在一开始并不是很有帮助，因为问题很少是jQuery的错误，而且大多数时候代码都被最小化了。您需要在中选择“调用堆栈”选项卡