jQuery accordion menu - keep accordion menu open to the page I am on

问题

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!

回答1:

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.

回答2:

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

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

I added id tags to the menu header divs and then placed the following in the content placeholder of the content page.

    $(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!

回答3:

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.

One solution some people seem to be using these days is to store this information after the hash part of the 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).

You might also want to look at the jQuery history plugin.

Or, as Alex points out below, benalman.com/projects/jquery-bbq-plugin

回答4:

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.

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:

        $("#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.

来源：https://stackoverflow.com/questions/1602963/jquery-accordion-menu-keep-accordion-menu-open-to-the-page-i-am-on

标签

jquery

dynamic

accordion