Question

我正在建立一个微型网站，我遇到了问题。我想通过单击我的菜单滚动到不同的列表元素。这工作正常。但问题是，通过使用列表索引遍历mainmenu的第二个或第三个元素，它在第一个菜单中唯一正常工作，因为第二个菜单的索引是通过添加到第一个菜单开始的。所以.mainmenu.children是错误的电话，但我不知道正确的电话。

所以问题是，如何才能通过父菜单选择列表索引？我不想使用三种不同的ID，因为菜单应该是动态的。

希望有人可以帮助我。

最好的问候

H-man24

$('.mainmenu').children('li').click(function(){     
    var myIndex = $('.mainmenu li').index(this);
    alert(myIndex + "  " + myPosition);
    var myPosition = $('#page > li').eq(myIndex).offset().top;
    $('html, body').animate({scrollTop:myPosition, duration:500, easing:'easeInOutCirc'});  
});

HTML：

<ul>
<li>
    <div>
    <ul class="mainmenu">
    <li>Link to 1</li> (index 0)
    <li>Link to 2</li> (index 1)
    <li>Link to 3</li> (index 2)
    </ul>
    <div>Content 1></div>
    </div>
</li>
<li>
    <div>
    <ul class="mainmenu">
    <li>Link to 1</li> (index 3, should be 0)
    <li>Link to 2</li> (index 4, should be 1)
    <li>Link to 3</li> ....
    </ul>
    <div>Content 2></div>
    </div>
</li>
<li>
    <div>
    <ul class="mainmenu"> 
    <li>Link to 1</li>
    <li>Link to 2</li>
    <li>Link to 3</li>
    </ul>
    <div>Content 3></div>
    </div>
</li>

Answer 1

怎么样：

$('.mainmenu li').click(function(){

    var myIndex = $(this).closest('.mainmenu').children('li').index(this);
    alert(myIndex + "  " + myPosition);
    var myPosition = $('#page > li').eq(myIndex).offset().top;
    $('html, body').animate({scrollTop:myPosition, duration:500, easing:'easeInOutCirc'});      
    });

使用jquery遍历列表元素

1 个答案: