jQuery accordion menu -保持accordion菜单打开到我所在的页面

Question

希望你能帮上忙。我对jQuery非常陌生，正在为我的侧边导航开发一个五六级的手风琴菜单。到目前为止，我从Dane Peterson @ daneomatic.com获得了大部分代码(谢谢Dane!)。但是，我被一件事卡住了：

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

当我向下导航到，比如说，第三级，并单击链接打开链接到该级别的页面时，一旦加载了第三级页面，我如何指示我在该页面上？另外，当我加载页面时，如何保持树对该级别的打开？

我想我要问的是:有没有办法让accordion/tree自动更新以显示您所在的页面，并将树打开到该级别？

提前感谢！

Answer 1

要让accordion根据URL自动打开正确的部分，您将首先启用navigation选项，如下所示：

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

缺省情况下，此选项查找具有与URL片段匹配的联系人的折叠标题链接(如果您的URL为http://somesite.com/about#contact，则# href为片段)，并打开该标题链接的部分。由于要使用accordion导航到不同的页面，因此可能没有URL片段可供匹配，因此必须编写一个自定义navigationFilter

$('#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>

在这里，我们将遍历导航折叠面板中的所有页面链接，选择与当前URL匹配的页面链接，并对其应用.active类，然后您可以使用CSS设置不同的样式。

An ：完成第二部分的另一种可能是更好的方法是使用已经应用于适当链接的.active类构建页面，但前提是您可以控制后端，并且您知道如何执行此操作。实际上，如果是这样的话，您可以跳过整个navigationFilter，并生成一个<script>块来设置accordion上的active选项，以打开右侧部分。

Answer 2

好的，这个问题已经困扰了我一段时间，我想我应该发布我对这个问题的解决方案。(我是JQuery的新手，所以....)

在我的环境中，我有一个母版页，其中包含处理菜单自动化的JQuery脚本，并且我有几个内容页，它们具有不同的菜单(我有一个横跨页眉的水平菜单，然后可以说，JQuery accordion处理子菜单)。

我将id标记添加到菜单标题div中，然后将以下内容放在内容页面的内容占位符中。

    $(document).ready(function () {
        $('.active').next().hide().removeClass('active');
        $('#yourMenuHeaderIdTag).addClass('active').next().show();
     };

它工作得很完美，它确实让我想知道为什么我在过去一周左右的时间里一直在为这个问题而苦苦挣扎，而解决方案是如此简单！

Answer 3

这是JavaScript导航网站的一个缺陷--你的网址并不像传统的页面那样实际指向你的页面。这使得使用书签和后退按钮等常规浏览器功能变得困难。

现在有些人似乎正在使用的一种解决方案是将这些信息存储在url的散列部分之后。

http://www.mysite.com/path/index.html#jsPageIndicator

通过存储信息而不是上面的"jsPageIndicator“，您可以用$( JavaScript ).ready()之后的文档解析它，并让它告诉您应该加载哪个页面。在您的例子中，这可能是一些简单的东西，比如具有焦点的手风琴的索引(应该是打开的)。

您可能还需要查看jQuery history plugin.

或者，正如Alex在下面指出的，benalman.com/projects/jquery-bbq-plugin