5

我有一个导航栏，它使用<li>列表中的另一个元素来创建下划线效果，该效果在悬停元素下方进行动画处理，并在鼠标移出时动画回活动元素。

小提琴：http: //jsfiddle.net/jP59W/

它似乎在 Chrome 和 Firefox 中运行良好，但在 IE (8) 中我得到了一个invalid argument error但我看不出是什么原因造成的。

即使它在 Firefox 中工作，它仍然会抛出这个错误：

$el.position(...) is undefined这是这一行：

leftPos = $el.position().left;

HTML

<div id="navbar">
    <ul class="clearfix">
        <li class="active">
            <a id="myoeHome" href="#">Welcome</a>
        </li>
        <li>
            <a id="myAccount" href="#">Your Profile</a>
        </li>
        <li>
            <a id="referAFriend" href="#">Refer A Friend </a>
        </li>
        <li>
        <a id="referralReport" href="#">View Rewards </a>
        </li>
        <li>
            <a id="shoutandShare" href="#">Write a Review </a>
        </li>
    </ul>
</div>

CSS

#navbar {
    position: relative;
    background-color: #ffffff;
    width: 990px;
    margin: -21px 0 0 0;

    padding: 20px 0 0 0;
    height: 35px;

    zoom: 1;
}

#navbar ul {
    width: 945px;
    list-style: none;
    padding: 0 0 0 40px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top:-13px;

    *margin: -25px auto 0 auto;
}

#navbar ul li {
    display: inline-block;
    text-align: left;

    /* padding: 0 1px 0 1px; */

    /* margin: 0 60px 0 5px; */

    margin: 0 0 0 0;
    padding: 10px 0 24px 0;
    width: 185px;

    *display: inline;
    *zoom: 1;
     *margin: 25px -11px 0 0;
}

#navbar ul li a {
    font-family: Helvetica, Arial;
    font-size: 18px;
    color: #002e55;
    text-align: center;
    padding-bottom: 24px;

    *display: inline;
    *float: left;

 }

#magic-line {
    position: absolute;
    bottom: 8px;
    left: 0;
    height: 3px;
    background: url("http://www.4playtheband.co.uk/assets/nav-magic-line.png") no-repeat center bottom;
    margin: 0 !important;
    padding: 0 !important;

    *bottom: 7px;
    *z-index: 999;
    *height: auto;
 }

#navbar ul li a:hover {
     height: 4px;
     /*border-bottom: 3px solid #002e55;*/

     zoom: 1;

    *margin-top: -39px;

}

#navbar ul li a.active {
    background: url("../images/psd/active-nav-bg.png") no-repeat 49% 2px;
    height: 4px;
    border-bottom: 3px solid #002e55;

    zoom: 1;
}

jQuery

// nav
var $el, leftPos, newWidth,
$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;
        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);
        }
    });
}

$(document).ready(function() {
    $magicLine.width($(".active a").width());
    navBar();
});
4

2 回答 2

6

发生此类问题时，我见过两种情况：

  1. 您正在检查的项目当前隐藏（从未显示）或不在文档 DOM 中，因此没有实际坐标（您可以创建 DOM 片段）

  2. jQuery 对象（$el在您的情况下为 list ）为空；你可以通过测试知道$el.length == 0

由于parent()电话对您有用，因此您的问题肯定是案例（1）。

于 2016-03-30T03:41:48.153 回答
2

发现了问题。

改变了

leftPos = $el.position().left;

到

leftPos = $el.parent().position().left;

这解决了它。

于 2013-03-01T12:37:14.980 回答