jquery 접을 수있는 메뉴 도움말 - 거의 없지만 2 단계 깊이 접을 수 있어야합니다!

Question

나는 아코디언 메뉴를 http://www.i-marco.nl/weblog/에서 가져와 내가 원하는대로 사용자 정의했습니다. 내가 가진 한 가지 문제는 접을 수있는 몇 가지 하위 메뉴 항목이 있다는 것입니다. 내가 가지고있는 코드는 메뉴가 무너지는 관점에서 잘 작동하지만 상위 요소를 클릭하면이 메뉴를 취소 할 수 없습니다. 아무도 내가 여기서 잘못 가고있는 것을 볼 수 있습니까? 사전에

감사합니다!

HTML 코드 :

<ul class='menu collapsible' id='menu'> 

            <li id="home" class="selected expand top"> 
             <a href="http://localhost//public_html/index.php/home">Home</a> 
            </li> 
            <li id="about_the_school" class="top"> 
             <a href="http://localhost//public_html/index.php/about_the_school">About the School<span>Click to expand</span></a> 
             <ul class='acitem'> 
              <li> 
                <a href="http://localhost//public_html/index.php/about_the_school/welcome">Welcome</a> 
              </li> 

             </ul> 
            </li> 
            <li id="academic" class="top"> 
             <a href="http://localhost//public_html/index.php/academic">Academic<span>Click to expand</span></a> 
             <ul class='acitem'> 
              <li> 
                <a href="http://localhost//public_html/index.php/academic/curriculum_&amp;_exam_system">Curriculum &amp; Exam System</a> 
              </li> 
              <li> 
                <a href="http://localhost//public_html/index.php/academic/departments">Departments</a> 
                <ul class='acitem menu collapsible'> 
                 <li> 
                  <a href="http://localhost//public_html/index.php/academic/departments/art">Art</a> 
                 </li> 
                 <li> 
                  <a href="http://localhost//public_html/index.php/academic/departments/business_education">Business Education</a> 
                 </li> 

                </ul> 
              </li> 
              <li> 
                <a href="http://localhost//public_html/index.php/academic/pupil_support">Pupil Support</a> 
              </li> 
              <li> 
                <a href="http://localhost//public_html/index.php/academic/careers">Careers</a> 
              </li> 
             </ul> 
            </li> 
           </ul> 
</ul> 

JS :이 섹션에

jQuery.fn.initMenu = function(){ 
    return this.each(function(){ 
     var theMenu = $(this).get(0); 
     $('.acitem', this).hide(); 
     $('li.expand > .acitem', this).show(); 
     $('li.expand > .acitem', this).prev().addClass('active'); 
     $('li a', this).click(function(e){ 
      e.stopImmediatePropagation(); 
      var theElement = $(this).next(); 
      var parent = this.parentNode.parentNode; 

      if (theElement.hasClass('acitem') && theElement.is(':visible')) { 
       if ($(parent).hasClass('collapsible')) { 
         $('.acitem:visible', parent).first().slideUp('normal', function(){ 
          $(this).prev().removeClass('active'); 
         }); 
         return false; 
        } 
        return false; 
      } 
      if (theElement.hasClass('acitem') && !theElement.is(':visible')) { 

       //custom - adds class at beginning of expansion 
       $(this).addClass('active'); 

       $('.acitem:visible', parent).first().slideUp('normal', function(){ 
        $(this).prev().removeClass('active'); 
       }); 
       theElement.slideDown('normal', function(){ 
         $(this).prev().addClass('active'); 
       }); 
       return false; 
      } 
     }); 
    }); 
};$(document).ready(function(){ 
    $('.menu').initMenu(); 
}); 

Answer 1

:

<a href="http://localhost//public_html/index.php/academic">Academic 
    <span>Click to expand</span> 
</a> 
<ul class='acitem'> 

당신은 그것뿐만 아니라 붕괴 얻기 위해 그 <ul>에 collapsible 클래스가 필요, 다음과 같이 나머지는 동일합니다.

<ul class='acitem collapsible'> 

You can see an updated/working demo with the fix here.