jQuery手风琴菜单 – 将手风琴菜单打开到我所在的页面

我希望你能帮忙。 我是jQuery的新手,正在为我的侧导航工作一个五或六级手风琴菜单。 到目前为止,我从Dane Peterson @ daneomatic.com获得了大部分代码(感谢Dane!)。 但是,我坚持一件事:

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

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

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

提前致谢!

要让手风琴根据URL自动打开正确的部分,您首先要启用navigation选项,例如:

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

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

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

您可以使用navigationFilter选项覆盖accordion插件如何将标题链接与当前页面的URL匹配。

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

   

在这里,我们将浏览导航手风琴中的所有页面链接,选择与当前URL匹配的页面链接,并将一个.active类应用于它,然后您可以使用CSS进行不同的样式。


旁白:完成第二部分的另一种可能更好的方法是使用已经应用于相应链接的.active类来构建页面,但这假设您可以控制后端并且知道如何执行此操作。 实际上,如果是这种情况,您可以跳过整个navigationFilter事件并生成块来设置手风琴上的active选项以打开右侧部分。

好的,这个问题已经困扰了我一段时间,并认为我会发布我的解决方案来解决这个问题。 (我是一个JQuery的新手,所以….)

在我的情况下,我有一个母版页,其中包含用于处理菜单自动化的JQuery脚本,我有几个具有不同菜单的内容页面(我在页面标题中有一个水平菜单,然后JQuery手风琴处理子菜单,所以说话)。

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

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

这完美地工作,它确实让我想知道为什么我在过去一周左右的时候一直在努力解决这个问题!

这是JavaScript导航网站的一个陷阱 – 您的url实际上并不像传统网页那样指向您的网页。 这使得使用书签和后退按钮等常规浏览器function变得很困难。

一些人似乎现在使用的一种解决方案是在url的哈希部分之后存储此信息。

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

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

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

或者,正如Alex指出的那样, benalman.com/projects/jquery-bbq-plugin

你可以在这里看到: http : //blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

以上都不适合我。 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结构。

这是一个对我有用的例子:

需要帮助jQuery UI Accordion navigationFilter选项