jQuery 手风琴菜单 - 保持手风琴菜单打开我所在的页面 [英] jQuery accordion menu - keep accordion menu open to the page I am on

问题描述

希望能帮到你.我对 jQuery 非常陌生，正在为我的侧面导航设计一个五级或六级手风琴菜单.到目前为止，我从 Dane Peterson @ daneomatic.com 获得了大部分代码(感谢 Dane！).但是，我坚持一件事:

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

当我向下导航到第三级并单击链接以打开链接到该级别的页面时，如何在第三级页面加载后指示我在该页面上?另外，如何在加载页面时将树保持在该级别?

我想我想问的是:有没有办法让手风琴/树自动更新以显示您所在的页面，并将树打开到那个级别?

提前致谢！

解决方案

要让手风琴根据 URL 自动打开正确的部分，您将从启用 navigation 选项开始喜欢:

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

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

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

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

到目前为止，我们已经根据当前页面打开了手风琴的正确部分.接下来，我们需要突出显示该部分中与页面对应的链接.你会用类似的东西来做到这一点:

<div id="手风琴"><h3><a href="#">第 1 节</a></h3><div><ul><li><a href="/about">关于</a></li><li><a href="/contact">联系方式</a></li>

<h3><a href="#">第 2 节</a></h3><div><ul><li><a href="/help">帮助</a></li><li><a href="/faq">常见问题</a></li>

在这里，我们将浏览导航手风琴中的所有页面链接，选择与当前 URL 匹配的链接，然后对其应用 .active 类，然后您可以使用不同的样式CSS.

<小时>

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