Javascript Superfish菜单，只需将魔线粘贴到第一个元素即可

Im使用超级鱼和魔线构建导航

JSFIDDLE:

幻线的宽度是根据父宽度计算的，如下所示：

$(document).ready(function() {

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

            /* Cache it */
            var $magicLine = $("#magic-line");

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

            $("#example li").find("a").hover(function() {
                $el = $(this);
                orPos = $("#example").offset().left;
                leftPos = $el.offset().left-orPos;
                newWidth = $el.parent().width();

                $magicLine.stop().animate({
                    left: leftPos,
                    width: newWidth
                });
            }, function() {
                $magicLine.stop().animate({
                    left: $magicLine.data("origLeft"),
                    width: $magicLine.data("origWidth")
                });    
            });


            var example = $('#example').superfish({
                    //add options here if required
            });
    });

$（文档）.ready（函数（）{
$（“#示例”）.append（“
”）；
/*缓存它*/
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current\u page\u item”）.width（）
.css（“左”（“.current_page_item a”）.position（）.left）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#示例li”）.find（“a”）.hover（函数（）{
$el=$（此项）；
orPos=$（“#示例”）.offset（）.left；
leftPos=$el.offset（）.leftorpos；
newWidth=$el.parent（）.width（）；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});    
});
变量示例=$（“#示例”）.superfish({
//如果需要，请在此处添加选项
});
});

它适用于第一级链接。然而，若你们将鼠标悬停在第二级链接上，魔线将获得新的宽度并扩展。我不想那样。我只需要它是相同的宽度作为第一级（家长）只

---

感谢您对正确提问投反对票。无论如何，我找到了解决办法。我没有测量

a

元素，而是切换到测量

li

元素（仅第一级）。代码是：

$(document).ready(function() {

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

            /* Cache it */
            var $magicLine = $("#magic-line");

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

            $("#example > li").hover(function() {
                $el = $(this);
                orPos = $("#example").offset().left;
                leftPos = $el.offset().left-orPos;
                newWidth = $el.width();

                $magicLine.stop().animate({
                    left: leftPos,
                    width: newWidth
                });
            }, function() {
                $magicLine.stop().animate({
                    left: $magicLine.data("origLeft"),
                    width: $magicLine.data("origWidth")
                });    
            });


            var example = $('#example').superfish({
                    //add options here if required
            });
    });

$（文档）.ready（函数（）{
$（“#示例”）.append（“
”）；
/*缓存它*/
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current\u page\u item”）.width（）
.css（“左”（“.current_page_item a”）.position（）.left）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#示例>li”）.hover（函数（）{
$el=$（此项）；
orPos=$（“#示例”）.offset（）.left；
leftPos=$el.offset（）.leftorpos；
newWidth=$el.width（）；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});    
});
变量示例=$（“#示例”）.superfish({
//如果需要，请在此处添加选项
});
});