jQuery手风琴菜单 - 保持手风琴菜单打开我所在的页面 [英] jQuery accordion menu - keep accordion menu open to the page I am on

问题描述

我希望你能帮忙。
我很喜欢jQuery，正在为我的侧边导航工作一个五级或六级手风琴菜单。我从Dane Peterson @ daneomatic.com获得了绝大多数代码（谢谢Dane！）。但是，我被困在一件事上：

我想要我的手风琴/树木工作：

当我向下导航到三级，然后点击链接打开链接到该级别的页面时，如果我在页面上加载了三级页面，我该如何指出？
此外，当我加载页面时，如何保持该树开放到该级别？

我想我在问的是：有没有办法为了自动更新手风琴/树，以显示您所在的页面，并将树开放到该级别？

提前感谢！

解决方案

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

  $（'＃accordion'）。accordion（'option'，'导航'，真实）; 
  

默认情况下，此选项查找具有 href的手风琴头链接匹配URL片段（如果您的URL是 http://somesite.com/about#联系人，#contact是片段），并打开该标题链接的部分。由于您使用手风琴导航到不同的页面，因此您可能不会具有匹配的网址片段，因此您必须编写自定义的 navigationFilter ：

  $（'＃accordion'）。accordion（'option'，'navigationFilter'，function（）{...}） ; 
  

您可以使用 navigationFilter 选项覆盖手风琴插件如何匹配当前页面的标题链接。

到目前为止，我们已经根据当前页面打开了手风琴的正确部分。接下来，我们需要突出显示与该页面相对应的该部分中的链接。你会这样做：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（'＃accordion li'）。each（function（）{
 var li = $（this）; 
 var a = $（'a'，li）; 
 if（/ *将'a'元素的href与当前URL * /）进行比较{
 li.addClass（'active'）; 
} 
}）; 
}）; 
< / script> 
 
< div id =accordion> 
< h3>< a href =＃>第1节< / a>< / h3> 
< div> 
< ul> 
< li>< a href =/ about>关于< / a>< / li> 
< li>< a href =/ contact>联系人< / a>< / li> 
< / ul> 
< / div> 
< h3>< a href =＃>第2节< / a>< / h3> 
< div> 
< ul> 
< li>< a href =/ help>帮助< / a>< / li> 
< li>< a href =/ faq> FAQ< / a>< / li> 
< / ul> 
< / div> 
< / div> 
  

这里我们将介绍导航手风琴中的所有页面链接，选择与当前的URL，然后应用一个 .active 类，然后您可以使用CSS进行风格不同。

---

另一个，可能更好的方式来完成第二部分是使用 .active 类已经应用到相应的链接，但是这假定您可以控制后台，并且知道如何执行。事实上，如果是这样，你可以跳过整个 navigationFilter 的东西，并生成一个< script> 块在手风琴上设置活动选项以打开正确的部分。

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:

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!

解决方案

To get the accordion to automatically open the correct section based on the URL, you'll start with enabling the navigation option with something like:

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

By default, this option looks for the accordion header link that has an href that 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:

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

You can use the navigationFilter option to override how the accordion plugin matches header links to the URL of the current page.

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 .active class to it, which you can then style differently with CSS.

---

An aside: another, probably better, way to accomplish the second part is to build the page with the .active class 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 navigationFilter thing and generate a <script> block to set the active option on the accordion to open the right section.

这篇关于jQuery手风琴菜单 - 保持手风琴菜单打开我所在的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！