jQuery 手风琴菜单 - 保持手风琴菜单打开我所在的页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1602963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery accordion menu - keep accordion menu open to the page I am on
提问by MelissaTA
I hope you can help. I'm very new to jQuery and am working on a five- or six-level accordion menu for my side navigation. I got the majority of the code I have so far from Dane Peterson @ daneomatic.com (thanks Dane!). But, I'm stuck on one thing:
我希望你能帮忙。我对 jQuery 非常陌生，正在为我的侧边导航设计一个五级或六级手风琴菜单。到目前为止，我从 Dane Peterson @ daneomatic.com 获得了大部分代码（感谢 Dane！）。但是，我坚持一件事：
I'd like to have my accordion/tree work like this:
我想让我的手风琴/树像这样工作：
When I navigate down into, say, level three, and click on the link to open the page linked to that level, how do I indicate once the level three page loads that I'm on that page? Also, how do I keep the tree open to that level when I load the page?
当我向下导航到第三级并单击链接以打开链接到该级别的页面时，如何在第三级页面加载后指示我在该页面上？另外，如何在加载页面时将树保持在该级别？
I guess what I'm asking is: is there a way for the accordion/tree to automatically update to show what page you're at, and have the tree open to that level?
我想我要问的是：有没有办法让手风琴/树自动更新以显示您所在的页面，并将树打开到那个级别？
Thanks in advance!
提前致谢！
回答by No Surprises
To get the accordion to automatically open the correct section based on the URL, you'll start with enabling the navigationoption with something like:
要让手风琴根据 URL 自动打开正确的部分，您首先要启用该navigation选项，例如：
$('#accordion').accordion('option', 'navigation', true);
By default, this option looks for the accordion header link that has an hrefthat matches the URL fragment (if your URL is http://somesite.com/about#contact, #contact is the fragment) and opens that header link's section. Since you're using the accordion to navigate to different pages, you probably won't have URL fragments to match against, so you'll have to write a custom navigationFilter:
默认情况下，此选项会查找href与 URL 片段匹配的手风琴标题链接（如果您的 URL 是http://somesite.com/about#contact，#contact是片段）并打开该标题链接的部分。由于您使用手风琴导航到不同的页面，因此您可能没有要匹配的 URL 片段，因此您必须编写自定义navigationFilter：
$('#accordion').accordion('option', 'navigationFilter', function(){ ... });
You can use the navigationFilteroption to override how the accordion plugin matches header links to the URL of the current page.
您可以使用该navigationFilter选项来覆盖手风琴插件如何将标题链接匹配到当前页面的 URL。
So far, we've got the right section of the accordion to open based on the current page. Next, we need to highlight the link in that section that corresponds to the page. You'll do that with something like:
到目前为止，我们已经根据当前页面打开了手风琴的正确部分。接下来，我们需要突出显示该部分中与页面对应的链接。你会这样做：
<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>
Here we're going through all the page links in the navigation accordion, picking the one that matches the current URL, and applying an .activeclass to it, which you can then style differently with CSS.
在这里，我们将浏览导航手风琴中的所有页面链接，选择与当前 URL 匹配的链接，并对其应用一个.active类，然后您可以使用 CSS 对其进行不同的样式设置。
An aside:another, probably better, way to accomplish the second part is to build the page with the .activeclass already applied to the appropriate link, but that assumes you have control over the backend and that you know how to do it. In fact, if that's the case, you could skip the whole navigationFilterthing and generate a <script>block to set the activeoption on the accordion to open the right section.
旁白：完成第二部分的另一种可能更好的方法是使用.active已应用于适当链接的类来构建页面，但前提是您可以控制后端并且知道如何操作。事实上，如果是这种情况，您可以跳过整个过程navigationFilter并生成一个<script>块来设置active手风琴上的选项以打开正确的部分。
回答by Stuart Daly
OK this issue has been bugging me for a while and thought I would post my solution to this problem. (I am a bit of a newbie with JQuery so....)
好的，这个问题已经困扰我一段时间了，我想我会发布我对这个问题的解决方案。（我是 JQuery 的新手，所以......）
In my circumstance I have a master page that contains the JQuery script to handle the automation of the menu and I have several content pages that have different menus (I have a horizontal menu accross the page header and then the JQuery accordion handles the sub menu so to speak).
在我的情况下，我有一个母版页，其中包含处理菜单自动化的 JQuery 脚本，并且我有几个具有不同菜单的内容页面（我有一个横跨页面标题的水平菜单，然后 JQuery 手风琴处理子菜单，因此说话）。
I added id tags to the menu header divs and then placed the following in the content placeholder of the content page.
我将 id 标签添加到菜单标题 div，然后将以下内容放置在内容页面的内容占位符中。
$(document).ready(function () {
$('.active').next().hide().removeClass('active');
$('#yourMenuHeaderIdTag).addClass('active').next().show();
};
This works perfectly and it did make me wonder why I have struggled with this over the last week or so when the solution is so simple!
这非常有效，它确实让我想知道为什么在解决方案如此简单的情况下，我在过去一周左右的时间里一直在努力解决这个问题！
回答by Dennis Decker Jensen
None of the above worked for me. The documentation for jquery ui is spare, and the source code didn't leave many clues for somebody not well versed in jquery.
以上都不适合我。jquery ui 的文档是多余的，源代码没有给不精通 jquery 的人留下很多线索。
I used the accordion in a sidebar, and the links in each content section were inside tables, so I had to keep track of my HTML-structure (a fragile thing), and do this right after creation of the accordion:
我在侧边栏中使用了手风琴，每个内容部分的链接都在表格内，所以我必须跟踪我的 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());
}
});
Yes, horrific, backing up a tr, tbody, table, and div, but it worked, and in our case we haven't changed the HTML-structure in months.
是的，太可怕了，备份 tr、tbody、table 和 div，但它起作用了，在我们的例子中，我们几个月没有改变 HTML 结构。
回答by Matt
This is one of the pitfalls of JavaScript navigated websites - your URL doesn't actually point to your page, like a traditional page. It makes it difficult to use normal browser features like bookmarks and the back button.
这是 JavaScript 导航网站的陷阱之一 - 您的 URL 实际上并不像传统页面那样指向您的页面。这使得使用普通浏览器功能（如书签和后退按钮）变得困难。
One solution some people seem to be using these days is to store this information after the hash part of the url.
最近有些人似乎在使用的一种解决方案是将这些信息存储在 url 的哈希部分之后。
http://www.mysite.com/path/index.html#jsPageIndicator
By storing information in place of "jsPageIndicator" above, you can then parse it with the JavaScript after $(document).ready(), and have it tell you what page should be loaded. In your case this might be something simple, such as the index of the accordion that has the focus (should be open).
通过存储信息代替上面的“jsPageIndicator”，你可以在 $(document).ready() 之后用 JavaScript 解析它，让它告诉你应该加载哪个页面。在您的情况下，这可能很简单，例如具有焦点的手风琴的索引（应该是打开的）。
You might also want to look at the jQuery history plugin.
您可能还想查看jQuery 历史插件。
Or, as Alex points out below, benalman.com/projects/jquery-bbq-plugin
或者，正如 Alex 在下面指出的那样，benalman.com/projects/jquery-bbq-plugin
