Question

我的网站结构简要概述：

主索引php通过ajax提供本地存储的php文件。（如果它听起来很乱，那是因为它是）

我在主索引文件中有一个函数，我从ajax加载的脚本调用它，除了IE之外它可以正常工作。

我无法收到有意义的错误消息：

Invalid argument.  jquery-1.4.2.min.js, line 144 character 219

N.B这个问题与我之前的问题直接相关：jQuery $el.position(...) is undefined

jQuery函数（index.php）

// nav
var $el;
var leftPos;
var newWidth;
var $mainNav = $("#navbar ul");

$mainNav.prepend("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

function navBar() {

    // console.log('navBar start');
    function checkActive() {
        // console.log('check active');
        // Hide magic line if nav bar has no active element
        if($('#navbar ul').children('.active').length < 1) {
            $magicLine.hide();
            //console.log($('#navbar ul').children('.active').length < 1);
            //console.log($('#magic-line'));
            //console.log('hide');
        }
        else {
            $magicLine.stop().animate({
                left: $magicLine.css('left', $(".active a").css('left')),
                width: $magicLine.width($(".active a").width())
            });
        }
    }
    checkActive();
    $magicLine
        .width($(".active a").width())
        .css("left", $(".active a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $(".active a").width());

    // $("#navbar ul li a").hover(function() {
    // apply hover function to li instead and just just el to it's child
    $("#navbar ul li").hover(function() {
        // $el = $(this);
        $el = $(this).children('a');
        // leftPos = $el.position().left;
        leftPos = $el.parent().position().left;
        newWidth = $el.width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        }, 600);
    }, function() {
        if($('#navbar ul').children('.active').length < 1) {
            $magicLine.stop();
            checkActive();
        } else {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                //width: $magicLine.data("origWidth")
                width: $magicLine.width($(".active a").width())
            }, 600);
        }
    });
}

只需执行以下操作即可在我的所有脚本中调用：

navBar();

但由于某种原因，它在IE中引起问题，我看不出为什么会这样做。

Answer 1

我只是在这里采取刺，但我会审查这个：

width: $magicLine.width($(".active a").width())

这是一个传递给.animate()的对象。该行正在做的是使用jQuery的$magicLine函数将.active a的宽度设置为.width()宽度。该函数返回的是对您开始使用的jQuery元素$magicLine的引用。这种技术允许您一个接一个地链接jQuery函数。

所以，上面这一行将有效解决：

width: $magicLine

我相信你想要的是：

width: $(".active a").width()

试一试，希望就是这样！

Answer 2

知道了，好像是这一行：

$magicLine
        .width($(".active a").width())
        .css("left", $(".active a").position().left);

将其更改为

$magicLine.stop().animate({
        left: $(".active a").parent().position().left,
        //width: $magicLine.width($(".active a").width())
        width: $(".active a").width()
});

但这是在checkActive函数中完成的，就在此行之前调用，所以我只是删除它....

感谢您的帮助。

jQuery - 为什么IE8不喜欢这个功能？

2 个答案: