Question

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

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

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

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

提前致谢！

Answer 1

要让手风琴根据网址自动打开正确的部分，您首先要启用navigation选项，例如：

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

默认情况下，此选项会查找与URL片段匹配的href的手风琴标题链接（如果您的网址为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事件并生成<script>块，以便在手风琴上设置active选项以打开右侧部分。

Answer 2

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

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

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

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

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

Answer 3

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

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

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

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

您可能还想查看jQuery history plugin.

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

Answer 4

您可以在此处看到：http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

Answer 5

以上都不适合我。 jquery ui的文档是多余的，源代码没有为那些不熟悉jquery的人留下许多线索。

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

        $("#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结构。

Answer 6

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

Need help with jQuery UI Accordion navigationFilter option

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

6 个答案: