jquery를 사용한 목록 요소 이동

Question

현재 마이크로 사이트를 만들고 있는데 문제가 있습니다. 내 메뉴를 클릭하여 다른 목록 요소로 스크롤하고 싶습니다. 이것은 잘 작동합니다. 그러나 문제는리스트 인덱스를 사용하여 메인 메뉴의 두 번째 또는 세 번째 요소로 이동하는 것입니다. 두 번째 메뉴의 인덱스가 첫 번째 메뉴에 추가되어 3으로 시작하기 때문에 첫 번째 메뉴에서만 제대로 작동합니다. 그래서 .mainmenu.children은 잘못된 호출이지만 올바른 것을 모른다.

문제는 어떻게 부모 메뉴로만 목록 색인을 선택할 수 있습니까? 메뉴가 동적이어야하므로 3 개의 다른 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'});  
    });