Question

我正在使用导航菜单，下面是标记结构，在document.ready上添加了span元素： -

<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为span / arrow图像设置动画。

当在根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变量尝试了位置和偏移量，并且我现在使用位置，因为偏移量甚至无法在root上工作。

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

我已经在论坛上搜寻并尝试了一些事情，但我很难说是诚实的，并且非常感谢任何帮助!!

下面是用于为span / arrow图像设置动画的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

我不确定，如果我遇到问题，但检查子菜单是否有“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元素始终为span的0位置，这样如果它在节点3处移动到节点1，则必须转到减号。

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

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

jQuery动画问题，解决方案补充说

2 个答案: