jQuery를 사용하여 다중 레벨 jquery 아코디언 메뉴를 만드는 방법은 무엇입니까?

Question

jQuery를 사용하여 다중 레벨 아코디언 탐색을 만들고 싶습니다.이 스크립트를 사용해 보았지만 다중 레벨을 허용하지 않았습니다. 정확히 내가 무엇을 찾고 이미지,

http://www.i-marco.nl/weblog/jquery-accordion-menu/#

alt text http://img36.imageshack.us/img36/7897/multilevelaccordian.png

감사

Answer 1

먼저 마크 업과 같이 항목을 참조하시기 바랍니다. "accordion"클래스가있는 하위 메뉴를 표시하려고합니다.

<ul class="accordion"> 
    <li><a class="head" href="#">Item 1</a> 
     <ul class="accordion"> 
     <li><a href="#">Item 1 - 1 </a></li> 
     <li><a href="#">Item 1 - 2</a></li> 
     <li> 
     <a href="#">Item 1 - 3</a> 
     <ul class="accordion"> 
      <li><a href="#">Item 1 - 3 - 1</a></li> 
      <li><a href="#">Item 1 - 3 - 1 </a></li> 
      <li><a href="#">Item 1 - 3 - 1</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li><a href="#">Item 2</a></li> 
    <li> 
    <a href="#">Item 3</a> 
    <ul class="accordion"> 
     <li><a href="#">Item 3 - 1 </a></li> 
     <li><a href="#">Item 3 - 2</a></li> 
     <li><a href="#">Item 3 - 2</a></li> 
    </ul> 
    </li> 
</ul> 

그건 그냥 JQuery와 코어 파일과의 jQuery UI 파일을 포함하는 것을 잊지 마세요 jQuery를 UI의 아코디언 플러그인을 (사용 후. 스타일

<script type="text/javascript"> 
    $(function() { 
     $(".accordion").accordion(); 
    }); 
</script> 

http://jqueryui.com/demos/accordion/

사용 CSS 필요. 물론 구조와 클래스 이름을 원하는대로 변경할 수 있습니다.이 방법이 가장 쉬운 방법입니다.