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

Question

我希望你能帮忙。 我对 jQuery 很陌生，正在为我的侧面导航开发五级或六级手风琴菜单。到目前为止，我从 Dane Peterson @ daneomatic.com 那里获得了大部分代码（感谢 Dane！）。但是，我坚持一件事：

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

当我向下导航到第三级，然后单击链接打开链接到该级别的页面时，如何一旦第三级页面加载，我是否表明我在该页面上？ 另外，当我加载页面时，如何使树保持打开到该级别？

我想我要问的是：有没有办法让手风琴/树自动更新以显示您所在的页面，并使树打开到该级别？

提前致谢！

Answer 1

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

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

默认情况下，此选项会查找具有 < 的手风琴标题链接。 code>href 与 URL 片段匹配（如果您的 URL 是 http://somesite.com/about# contact，#contact 是片段）并打开该标题链接的部分。由于您使用折叠面板导航到不同的页面，因此您可能没有要匹配的 URL 片段，因此您必须编写自定义 navigationFilter：

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

您可以使用 navigationFilter 选项覆盖 Accordion 插件如何将标题链接匹配到当前页面的 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 设计不同的样式。

---

旁白：完成第二部分的另一种可能更好的方法是使用已应用于适当链接的 .active 类来构建页面，但这假设您已经控制后端并且您知道如何做到这一点。事实上，如果是这种情况，您可以跳过整个 navigationFilter 事情并生成一个

Answer 2

好吧，这个问题已经困扰我一段时间了，我想我会发布我的解决方案来解决这个问题。 （我是 JQuery 的新手，所以......）

在我的情况下，我有一个母版页，其中包含用于处理菜单自动化的 JQuery 脚本，并且我有几个具有不同菜单的内容页面（我有一个可以说，水平菜单横跨页面标题，然后 JQuery 手风琴处理子菜单）。

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

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

这非常有效，它确实让我想知道为什么我在过去一周左右的时间里一直在努力解决这个问题，而解决方案是如此简单！

Answer 3

这是 JavaScript 导航网站的陷阱之一 - 您的 URL 实际上并不像传统页面一样指向您的页面。这使得使用书签和后退按钮等普通浏览器功能变得困难。

如今，一些人似乎使用的一种解决方案是将这些信息存储在 url 的哈希部分之后。

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

通过存储信息来代替上面的“jsPageIndicator”，您可以在 $(document).ready() 之后使用 JavaScript 对其进行解析，并让它告诉您应该加载哪个页面。在您的情况下，这可能很简单，例如具有焦点的手风琴的索引（应该打开）。

您可能还想查看 jQuery 历史插件。

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

Answer 4

以上都不适合我。 jquery ui 的文档是多余的，并且源代码没有给不熟悉 jquery 的人留下太多线索。

我在侧边栏中使用了手风琴，每个内容部分中的链接都在表格内，所以我必须跟踪我的 HTML 结构（一个脆弱的东西），并在创建手风琴后立即执行此操作：

        $("#sidebar td").each(function () {
            var td = $(this);
            var a = td[0].firstChild;
            if (a.href == location.href) {
                $("#sidebar").accordion("activate",
                        td.parent().parent().parent().parent().prev());
            }
        });

是的，可怕的，备份 tr、tbody、table 和 div，但它有效，在我们的例子中，我们已经几个月没有更改 HTML 结构了。