javascript - 激活 jQuery UI Accordion 菜单中的当前内容部分

Question

我正在尝试找出如何动态激活 jQuery UI Accordion 的正确内容部分菜单取决于当前正在查看的页面。我进行了广泛的搜索，似乎其他人过去也遇到过这个问题，但我还没有找到适合我的解决方案。我知道可以设置 active 来打开菜单的某个索引，但我需要动态地执行此操作。

我认为我可以使用 activate 方法实现我想要的目标，但我似乎无法弄清楚。我不想设置 cookie，因为这通常不适用于后退/前进按钮以及通过特定 URL 的直接导航。有人有主意吗？提前致谢!

这是我的菜单的简化结构:

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

这是我的 jQuery Accordion 初始化:

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

例如，如果您当前位于 /item4 页面，则应展开标题 #2 下的组。

编辑: 我找到了一个似乎非常好的解决方案，并将其作为答案发布在下面，希望这对遇到类似问题的人有所帮助!

Answer 1

要激活特定选项卡，您需要使用 accordion('activate', index) 方法。示例:

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

但是，您将需要定义每页索引键的东西。您甚至可以动态生成它。我可能会创建一个 Pages 对象:

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

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

}

使用一些 hackish jQuery 魔法，你可以循环浏览你的标题

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

无论如何，我确信有更干净、更有效的方法来做到这一点。