Question

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

enter image description here

目前我正在使用JQuery和XSLT。它支持三个级别，现在我必须将它改为5级。虽然目前的实施工作，但有点复杂。所以我想知道，如果有人实现了相同的。

链接和标题通过CMS和Jquery的XSLT进行。

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来识别手风琴标题，以避免使用慢速子选择器。

现在在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。希望这会有所帮助：）

Answer 2

听起来好像你正试图建立一个嵌套的手风琴。

使用 jQuery工具（http://jquerytools.github.io/demos/tabs/accordion.html），您可以轻松完成此操作。有一个小提琴（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）

如何实现多级手风琴菜单

2 个答案: