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

我希望你能帮忙。 我对jQuery非常陌生，正在为我的侧导航设计一个五到六级的手风琴菜单。到目前为止，我从Dane Peterson@daneomatic.com（谢谢Dane！）获得了大部分代码。但是，我有一件事要做：

我想让我的手风琴/树像这样演奏：

当我向下导航到（比如）第三级，然后单击链接打开链接到该级的页面时，当第三级页面加载后，我如何指示我在该页面上？ 另外，在加载页面时，如何保持树处于该级别

我想我要问的是：有没有一种方法可以让手风琴/树自动更新以显示您所处的页面，并让树打开到该级别

---

提前谢谢

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

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

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

通过将信息存储在上面的“jsPageIndicator”的位置，您可以在$（document）.ready（）之后使用JavaScript对其进行解析，并让它告诉您应该加载哪个页面。在你的例子中，这可能是一些简单的东西，比如有焦点的手风琴的索引（应该是开放的）

您可能还想看看

---

或者，正如Alex在下面指出的那样，

要让手风琴根据URL自动打开正确的部分，您首先要启用

导航

选项，如下所示：

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

<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片段匹配的

href

的accordion标题链接（如果您的URL是，#contact是片段），并打开该标题链接的部分。由于您正在使用accordion导航到不同的页面，因此可能没有URL片段可供匹配，因此您必须编写一个自定义的

导航过滤器

：

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

您可以使用

navigationFilter

选项覆盖accordion插件如何将标题链接匹配到当前页面的URL

到目前为止，我们已经根据当前页面打开了手风琴的正确部分。接下来，我们需要突出显示该部分中与页面对应的链接。您可以通过以下方式实现：

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

<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>

$（文档）.ready（函数（）{
$（'#手风琴li'）。每个（函数（）{
var li=$（本）；
变量a=$（'a'，li）；
if（/*比较'a'元素的href与当前URL*/）{
li.addClass（“活动”）；
}
});
});

在这里，我们将浏览导航手风琴中的所有页面链接，选择与当前URL匹配的链接，并对其应用

.active

类，然后您可以使用CSS对其进行不同的样式设置

---

---

旁白：完成第二部分的另一种可能更好的方法是使用已应用于相应链接的

.active

类构建页面，但前提是您可以控制后端，并且知道如何操作。事实上，如果是这样的话，你可以跳过整个

navigationFilter

的事情，生成一个

块来设置手风琴上的

active

选项来打开右边的部分。

以上这些都不适合我。jQueryUI的文档是多余的，源代码并没有给不熟悉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的新手，所以…）

在我的情况下，我有一个包含JQuery脚本的母版页来处理菜单的自动化，我有几个具有不同菜单的内容页（我有一个水平菜单，穿过页面标题，然后JQuery手风琴处理子菜单）

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

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

---

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

如果您使用这里描述的散列更改方法，那么以下插件是不匹配的：-它将很快取代非常过时的jQuery历史插件。@Alex-nice！我不知道这一点。谢谢你的信息-我会看看我是否可以让它与你的解决方案或与一个从没有惊喜（上面）-祈祷吧！