jQuery手风琴菜单 – 保持手风琴菜单打开我所在的页面

希望你能帮忙.
我很喜欢jQuery,正在为我的侧边导航工作一个五级或六级手风琴菜单.我从Dane Peterson @ daneomatic.com获得了绝大多数代码(谢谢Dane！).但是,我被困在一件事上：

我想要这样我的手风琴/树工作：

当我向下导航到三级,然后点击链接打开链接到该级别的页面时,如何在页面上加载三级页面？
另外,当我加载页面时,如何保持该树开放到该级别？

我想我要问的是：手风琴/树是否有自动更新的方式来显示您所在的页面,并将该树开放到该级别？

提前致谢！

解决方法

要使手风琴根据URL自动打开正确的部分,您将首先启用导航选项,如：

$('#accordion').accordion('option','navigation',true);

默认情况下,此选项查找具有与URL片段匹配的href的手风琴头链接(如果您的URL为http://somesite.com/about#contact,#contact是片段),并打开该标题链接部分.由于您使用手风琴导航到不同的页面,因此您可能不会具有匹配的URL片段,因此您必须编写自定义导航过滤器：

$('#accordion').accordion('option','navigationFilter',function(){ ... });

您可以使用navigationFilter选项来覆盖手风琴插件如何匹配当前页面的URL的标题链接.

到目前为止,我们已经根据当前页面打开了手风琴的正确部分.接下来,我们需要突出显示与该页面相对应的该部分中的链接.你会这样做：

<script type="text/javascript">
  $(document).ready(function() {
    $('#accordion li').each(function() {
      var li = $(this);
      var a = $('a',li);
      if(/* compare the href of the 'a' element to the current URL */) {
        li.addClass('active');
      }
    });
  });
</script>

<div id="accordion">
  <h3><a href="#">Section 1</a></h3>
  <div>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    <ul>
      <li><a href="/help">Help</a></li>
      <li><a href="/faq">FAQ</a></li>
    </ul>
  </div>
</div>

在这里,我们将介绍导航手风琴中的所有页面链接,选择与当前网址匹配的页面链接,并将.active类应用于其中,然后您可以使用CSS进行风格不同.

另外一个可能是更好的方式来完成第二部分是使用已经应用到适当链接的.active类来构建页面,但是假设你可以控制后台,并且知道如何做到这一点.事实上,如果是这样,你可以跳过整个navigationFilter的事情并生成一个< script>在手风琴上设置活动选项以打开正确的部分.

原文地址：https://www.jb51.cc/jquery/176354.html