jQuery 动画问题，已添加解决方案

Question

我正在开发导航菜单，标记结构如下，span 元素添加到 document.ready 上：-

<ul id="menu">
        <li class="menu act">Additional Fixture<span class="active"></span></li>
        <li class="menu">list with sub menu
            <ul class="sub-menu">
                <li class="menu">Option one</li>
            <li class="menu">Option two</li>
            <li class="menu">Option three</li>
            <li class="menu">Option four</li>
            <li class="menu">Option five</li>
        </ul>
    </li>
    <li class="menu"">Special Tricast</li>

跨度以设定的宽度和高度绝对定位，并包含一个箭头图像作为背景。

当用户单击菜单类以将活动范围移动到所选菜单 (li) 元素后面作为其选择的视觉指示器时，我使用 jQuery 为跨度/箭头图像设置动画。

当在根 li 处设置 active (act) 但如果位于列表中的其他任何位置时，此方法效果很好，例如： -

<ul id="menu">
        <li class="menu">Additional Fixture<span class="active"></span></li>
        **<li class="menu act">list with sub menu</li>**
</ul>

加载文档时箭头位置正确，但在用户单击时不会移动到正确的选择。我已经尝试了 divLocation 变量的位置和偏移量，并且我目前正在使用位置，因为即使在根目录下，偏移量也无法工作。

我基本上希望根据用户导航到的页面来设置箭头，因此无论列表的长度或位置如何，动画都需要从任何起始位置开始工作。

我已经在论坛上搜索并尝试了一些方法，但说实话我很难过，并且非常感谢任何帮助！

下面是用于对跨度/箭头图像进行动画处理的 jQuery 代码：-

var divLocation = $(this).position();

$("span.active").animate({
  'top': divLocation.top + topOffset,
      'left': divLocation.left + leftOffset

}, animationSpeed, "linear", function(){ 

$(selectedElement).addClass("text-light"); 
    $(selectedElement).fadeTo("100", opacityIn);


});

Answer 1

我不确定是否有问题，但检查子菜单 li 是否有“position:relative”。如果跨度定位不正确，这可能就是原因。

更新

我认为你应该稍微重写一下脚本。

// set height of the main links
var mainLinksHeight = 35;

// get index of the clicked element
var nextLink;

$('#menu li').click(function () {
    nextLink = $(this).index();
    $("span.active").animate({ top: nextLink * mainLinksHeight }, animationSpeed, "linear");
});

希望您能够根据您的需要修改此基本代码。

Answer 2

解决方案：

我开始使用下面发布的代码，并意识到通过将包含箭头图像的跨度嵌套在 li 元素本身中，我让自己的生活变得困难。这使得当前 li 元素始终处于跨度的 0 位置，因此，如果它位于节点 3，移动到节点 1，则必须转到负数。

修复实际上非常简单，我将跨度移动到无序列表的顶部，并使用 jQuery .css 设置页面加载时图像的起始位置。这样我根本不必更改动画代码或弄乱方程..数学从来都不是我的强项;)

可以在这里看到工作解决方案(http://www.kryptonite-dove.com/sandbox/menu /fix.html）感谢您的帮助！