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

您需要在collapsible上使用<ul>课程才能让它崩溃，与其他课程相同，就像这样：

<ul class='acitem collapsible'>

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

jquery可折叠菜单帮助 - 几乎在那里，但需要2级深度可折叠！

1 个答案: