자동 적용 나는 비교적 간단한 메뉴 구조를 가지고 jQuery를

Question

와 하위 메뉴의에 '높이'데이터를 한 단계 깊은,

• 메뉴 항목 1 개
• 메뉴 항목 ... UL/LI의 아래를 사용하여 만든 2
• 메뉴 항목 3
  • 하위 항목 1
  • 하위 항목이
  • 하위 항목 3
• 수직 suckerfish 데모는 다음과 같이 메뉴가 정확히 동일한 기본 형식으로, 롤 아웃에 마우스 오버와 수직 방식으로 표시됩니다 4

메뉴 항목 : http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

무엇 jQuery를 사용하여 각 하위 메뉴의 LI에 클래스를 자동으로 적용하고 싶습니다. 예를 들어 하위 항목 1은 메뉴 항목 3 옆에 있으며 높이 3이됩니다. 하위 항목 2의 높이는 4입니다. 메뉴 항목 4의 하위 메뉴 2는 '높이'가 5입니다.

내가하는 이유는 하위 메뉴 항목이 배경과 잘 맞을 CSS 스타일을 가져야한다는 것입니다. 즉, 메뉴가 곡선입니다. 따라서 스타일을 적용하면 CSS 스타일이 올바른 스타일이 될 수 있습니다. 신장.

코드가 너무 커서는 안됩니다. 각 하위에 'height1'또는 'height2'스타일의 클래스를 추가하기 만하면됩니다. 내 자바 스크립트 기술은 아직 약간 초보적인 자신을 시작하십시오!

미리 감사드립니다.

Answer 1

트릭을해야합니다. #nav를 UL의 ID로 바꿔주세요. 또한 0으로 인덱싱 된 높이 (height0, height1, height2 등)를 가정합니다.

function applyHeightClasses(el, offset){ 
    if(! (offset > 0)) offset = 0; 

    $(el).children('li').each(function(i) { 
    $(this).addClass('height' + (offset + i)); 

    $(this).children('ul').each(function(x) { 
     applyHeightClasses(this, (offset + i + x)); 
    }); 

    }); 
} 

$(document).ready(function() { 
    applyHeightClasses('#nav'); 
});