如何在折叠的手风琴中创建指向项目的链接？答案

【问题标题】：How can I create links to an item in a collapsed accordion?如何在折叠的手风琴中创建指向项目的链接？
【发布时间】：2012-05-10 09:38:38
【问题描述】：

尝试创建指向包含折叠折叠项的页面的链接，每个折叠项由 div ID 号标识。

通过向我的链接添加参数来链接和打开特定项目失败的尝试如下所示：

sample.html#itemIdX  // opens to the page but not the item

sample.html?itemIdX  // same result

项目使用H3 类：

itemPreviewTitle accordionHeader ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1" style="zoom: 1;

如何创建使我的 itemX 处于展开状态的链接？

【问题讨论】：

您在我的回答中应用该解决方案是否有运气？

标签： jquery hyperlink jquery-ui-accordion

【解决方案1】：

事实证明这比看起来要复杂一些，因为 Accordion API docs 并不那么容易理解，而且 activate() 函数似乎不像宣传的那样工作。

根据您的问题，听起来您想通过引用 div ID 打开手风琴部分。这不可能开箱即用。您只能使用基于 0 的索引来识别部分（例如，0 = 第一部分，1 = 第二部分等）。

话虽如此，这种方法会奏效：

这样定义链接：

<a href="10387904_Accordion_link_2.html?openAccordionId=0">Open first item</a>
<a href="10387904_Accordion_link_2.html?openAccordionId=1">Open second item</a>
<a href="10387904_Accordion_link_2.html?openAccordionId=2">Open third item</a>

在包含手风琴的页面上，使用以下代码从查询字符串中提取 ID 并初始化手风琴并激活相关部分：

// Using the parseQueryString extension from
// http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
$.extend({
    parseQuerystring: function () {
        var nvpair = {};
        var qs = window.location.search.replace('?', '');
        var pairs = qs.split('&');
        $.each(pairs, function (i, v) {
            var pair = v.split('=');
            nvpair[pair[0]] = pair[1];
        });
        return nvpair;
    }
});

// Get the index of the section we want to open from the querystring.
var openAccordionId = parseInt($.parseQuerystring()["openAccordionId"]);

// Initialise the accordion with the active section defined.
var accordion = $("#accordion").accordion({ active: openAccordionId });

// Note: for some reason, the following does not work:
//  var accordion = $("#accordion").accordion();
//  accordion.activate(openAccordionId);

【讨论】：