javascript - jquery 可折叠菜单帮助 - 差不多了，但也需要 2 层深度可折叠!

Question

我从 http://www.i-marco.nl/weblog/ 获取了 Accordion 菜单并根据我的需要定制了它。我遇到的一个问题是我有几个子菜单项也是可折叠的。我的代码在折叠菜单方面工作得很好，但是当单击父元素时我无法让它缩回此菜单。谁能看出我哪里出了问题吗？

提前致谢!

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'> 

您需要一个collapsible类(class)<ul>要让它也折叠起来，与其他人一样，如下所示:

<ul class='acitem collapsible'>

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