javascript - 超级鱼菜单，只需要魔术线坚持第一个元素

Question

我正在使用超级鱼和魔法线建立导航。

JSFIDDLE：http: //jsfiddle.net/gz7tx0rh/

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

$(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
            });
    });

它适用于第一级链接。但是，如果您将鼠标悬停在第二级链接上，魔术线将采用新的宽度并展开。我不想要那个。我只需要它与第一级（父级）的宽度相同。

Answer 1

感谢您对正确提出的问题投反对票。无论如何，我找到了解决方案。我没有测量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
            });
    });