在jQuery UI手风琴菜单中激活当前内容部件

Question

I'm trying to figure out how to dynamically activate the correct content part of a jQuery UI Accordion menu depending on the page currently being viewed. I've searched extensively and it seems like others have had issues with this in the past, but I haven't yet found a solution that works for me. I know that active can be set to open a certain index of the menu, but I need to do this dynamically.

I'm thinking that I can achieve what I want using the activate method, I just can't seem to figure it out. I'd like to stay away from setting cookies as that usually won't work with back/forward buttons and direct navigation via a specific url. Anyone have any ideas? Thanks in advance!

Here is the simplified structure of my menu:

<div id="menu">
    <div id="sections">
        <div class="grouping accordion">
            <a id="heading1" href="#">Heading #1</a>
            <div class="sub-items">
                <a href="/item1">Item #1</a>
                <br />
                <a href="/item2">Item #2</a>
            </div>
        </div>
        <div class="grouping accordion">
            <a id="heading2" href="#">Heading #2</a>
            <div class="sub-items">
                <a href="/item4">Item #4</a>
                <br />
                <a href="/item5">Item #6</a>
            </div>
        </div>
    </div>
</div>

And here is my jQuery Accordion init:

$('#sections').accordion({
    header: '> .accordion > a',
    autoHeight: false,
    collapsible: true,
    active: false,
    animated: 'slide'
});

So if you are currently on the /item4 page for example, the group under Heading #2 should be expanded.

EDIT: I found what seems to be a pretty good solution and posted that as an answer below, hopefully this will help someone with a similar problem!

Answer 1

To activate a specific tab, you'll want to use the accordion('activate', index) method. Example:

$( "#sections" ).accordion('activate', 2);

However, you will need something that defines an index key per page. You can probably even generate this dynamically. I would probably create a Pages object:

Pages = {
    "heading1" : {
        "id": 1,
        "is_active": false,
        "items": {
            "item1": {
                "href": "item1",
                "name": "Item #1"
            },
            "item2": {
                "href": "item2",
                "name": "Item #2"
            }
        }
    },

    "heading2" : {
        /* etc*/    
    },

}

With some hackish jQuery magic, you can loop through your headings

var active_heading_index = null;

$.each(Pages, function(heading) {
    $.each(heading.items, function(item) {
        if($(location).attr('href') == item.href) {
            heading.is_active = true;
            // or
            active_heading_index = heading.id
        }
    });
});

if(active_heading_index) $( "#sections" ).accordion('activate', active_heading_index);

Anyhow, I'm sure there are cleaner and more efficient ways of doing it.

Answer 2

While working on some CSS for the active headings on the menu I stumbled on a pretty clean and easy solution. Looks like I might have been overthinking things!

Using the same HTML as in the question, here's the JavaScript that is working for me:

//accordion menu
$('#sections').accordion({
    header: '> .accordion > a',
    autoHeight: false,
    collapsible: true,
    active: '.selected',
    animated: 'slide'
});

//add currentPage class to current menu item based on url
var url = window.location.href;
url = url.substr(url.lastIndexOf("/") + 1);
$("#sections").find("a[href='" + url + "']").addClass("currentPage");

//get id of header anchor tag
var headerId = $(".currentPage").parents(".accordion").children("a").attr("id");

//check if headerId is set, if so activate that id
if (headerId) {
    $('#sections').accordion('option', 'animated', false);
    $('#sections').accordion('activate', $('#' + headerId));
    $('#sections').accordion('option', 'animated', 'slide');
}

This solution is pretty simple, it gets the current page from the url and compares it against each link in the accordion menu. If it finds a match, it gives that link a class of currentPage (which allows us to then style that link accordingly via css). Then it looks for a parent of that link with a class of .accordion , finds the first child link (the accordion header) and grabs the header's id. Assuming a header id has been found, we can then use the activate method to expand the correct section.

Answer 3

If you are going back to the server for every page click (standard non Ajaxy way), the server can add a "selected" class to the proper node. So you'd get back something like this at the client (I'm only writing the essential code, skipping most of the labels).

<ul id="menu">
  <li>
    <ul>
      <li>
      </li>
      <li class="selected">
        <a href="">Menu 102</a>
      </li>
    <ul>
  </li>
  <li>
  ...
  </li>
<ul>

Then simply find the proper index to give to the activate property of the accordion.

$(document).ready(function() {
    var index = $("li.selected").parents("li").last().index();
    $("#menu").accordion({
      active: index,
      collapsible: true
    });
});

The parents("li").last() jQuery returns the top most element. This only works if you only have one sub element with the class "selected", which should be the case for your menu.

Answer 4

I did it using this code:

var newsNum = parseInt(window.location.hash.slice(1));
$(document).ready(function(){
    $("#menu").accordion('activate', newsNum );
});

And the url looks like example.com/index.html#1