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

Question

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

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

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

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

提前致谢!

Answer 1

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

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

默认情况下,此选项会查找href与URL片段匹配的accordion标头链接(如果您的URL为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

这是 JavaScript 导航网站的陷阱之一 - 您的 URL 实际上并不像传统页面一样指向您的页面。这使得使用书签和后退按钮等普通浏览器功能变得困难。

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

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

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

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

或者，正如亚历克斯在下面指出的那样，benalman.com/projects/jquery-bbq-plugin