javascript - 魔术线宽度错误

Question

我有这个 Jquery JS 脚本，它接受一个 UL LI A 并通过添加一个 LI 项目来在它下面添加一条魔术线，该 LI 项跟随悬停在一个 LI 上；我的问题是这个 LI 采用了您悬停的 LI 的 with，我需要它采用 LI A 标签的 with；我想不通。（主要是因为我不懂JS）

<script>
$(function() {

var $el, leftPos, newWidth,
    $mainNav = $("#example-one");

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

$magicLine
    .width($(".current").width())
    .css("left", $(".current a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#example-one li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

});

Answer 1

hover在您的功能中，您将 , 即的父母带入您的功能a。li标签。将您的功能更改为：

$("#example-one li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});