Question

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

原来IE7＆amp; 8不打球。

IE中的错误指向jQuery（在Google的CDN上）invalid argument。

可以查看该页面here。将鼠标移到顶部标题上以查看Firefox中应该发生的情况。 IE7 / 8中发生。

以下是我效果的源代码

String.prototype.safe = function() {
    var string = this;
    string = string.toLowerCase().replace(/\s/g, '-');
    string = string.replace(/&/g, 'and'); // &amp; 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!

        });


    }



}

我已经尝试了常见的嫌疑人并且使用了IE8开发者工具，但还没有想出这个。所以我转向Stack Overflow社区：）

有人知道这个问题吗？

Answer 1

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

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

由于currentListItemIndex为0：

，因此不会初始化sliderLeft变量

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

>> currentListItemIndex
0

>> sliderLeft
undefined

<强>更新

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

转到工具 - ＆gt;确保没有禁用它。高级并取消选中“禁用脚本调试（Internet Explorer）”选项。
当浏览器点击页面上的错误时，您将收到一个对话框，询问您是否要运行调试程序。确保选中“在Internet Explorer中使用内置脚本调试程序”选项。点击“是”启动调试器。
很多时候jQuery代码在传递意外值时会出错。这最初并不是很有用，因为问题很少是jQuery的错，而且大多数时候代码都是最小化的。您需要在调试器中选择“调用堆栈”选项卡，然后按照堆栈中的调用进行操作，直到找到导致问题的代码。这就是我能够在你的剧本中找到确切的行。
您可以使用Console，Locals和Watch选项卡运行某些脚本或查看错误发生时正在使用的变量的当前状态（如currentListItemIndex和sliderLeft变量）。

Answer 2

您使用的是jQuery 1.3.1，它是jQuery的旧版本，可能通过添加最新版本的jQuery来解决此问题。

IE的JavaScript问题

2 个答案: