如何实现多级手风琴菜单

Question

我的页面中有一个3级手风琴菜单.当点击任何级别的链接时,手风琴仍然打开,右侧打开相应的页面.沃金页面链接

目前我正在使用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');
    });       

});

此外，在您共享的实时页面中，他们正在刷新整个页面以获取更新的内容。我建议您使用 AJAX 来获取更新的内容，然后更新该容器，而不是进行整个页面刷新。这将提供更好的用户体验，并且还使您可以更轻松地跟踪所选手风琴，而无需保留页面刷新之间的状态。

这是根据我的更改从您那里分叉出来的更新后的小提琴。希望这可以帮助 ：）