如何实现多级折叠菜单

Question

我的页面中有一个3级的手风琴菜单。当在任何级别单击链接时，手风琴仍处于打开状态，相应的页面将在右侧打开。Woking page link

​

​

目前我使用的是JQuery和XSLT。它支持三个级别，现在我必须改变它的5个级别。虽然目前的实现是有效的，但它有点复杂。因此，我想知道，是否有人实现了相同的。

链接和标题是通过XSLT从CMS和Jquery访问的。

Answer 1

<ul class="accordion-menu">
    <li>
      <a href="#" class="title">Explore Careers</a>
      <ul>
          <li><a href="#">Set Careers</a></li>    
           <li><a href="#">Salaries</a></li>
      </ul>
    </li>
    <li class="active">
        <a href="#" class="title">Self assessments</a>
        <ul>
         <li>
          <a href="#">What is an assessment?</a>
         </li>
          <li>
            <a href="#" class="clicked">Interest assessment</a>
          </li>
          <li><a href="#">Skills assessment</a></li>
          <li><a  href="#">Work values</a></li>
       </ul>
    </li>
    <li>
       <a href="#" class="title">Learn about careers</a>
       <ul>
        <li><a href="#">Licenses</a></li>    
        <li><a href="#">Professions</a></li>
       </ul>
    </li>
</ul>

我已经添加了一个新的类title来识别accordion headers，以避免使用速度慢的子选择器。

现在，在您的script中添加以下内容

$(document).ready(function(){

    $('.title').on('click',function(){
      var $parent = $(this).parent();
      var $siblings = $parent.siblings();  
      $siblings.removeClass('active').find('ul').slideUp('normal');
      $parent.find('ul').slideDown('normal');
      $parent.addClass('active');
    });       

});

此外，在您共享的这个live页面中，他们正在刷新整个页面以获取更新的内容。我建议您使用AJAX获取更新的内容，然后更新该容器，而不是进行整个页面的刷新。这将提供更好的用户体验，并使您更容易跟踪选定的折叠，而不必保留页面刷新之间的状态。

这是更新的fiddle，从你的forked中派生出来，包含我的更改。希望这能有所帮助:)

Answer 2

听起来您似乎是在尝试构建一个嵌套折叠。

使用jQuery Tools (http://jquerytools.github.io/demos/tabs/accordion.html)可以很容易地做到这一点。有一个fiddle (http://jsfiddle.net/Xanetia/8kz4m/)演示了它，所以这只是一个样式问题。

与html的最大区别在于，您拥有的不是结构，而是：

<ul>
    <li>
      <a href="#" class="title">Explore Careers</a>
      <ul>
         ...
      </ul>
    </li>
    <li>
        etc.

您必须：

<div class="accordion">
    <h2>Explore Careers</h2>
    <div class="pane">
        <div class="accordion">
            <h2>Level 2 : 1</h2>
            <div class="pane">
            </div>
        </div>
    </div>
    <h2>Self assessments</h2>
    <div class="pane">
        etc.

替代解决方案：

您可能还想看看this jquery plugin off jqueryscript.net (参见演示here)