Question

我已经获得了这个Jquery JS脚本，它接受了一个UL LI A，并在它下面添加了一条魔术线，方法是在LI上方添加一个LI项目。我的问题是，这个LI采用了你正在盘旋的LI，我需要它采用LI A标签;我无法弄清楚。（基本上是因为我不认识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")
    });    
});

魔术线的宽度不对

1 个答案: