Question

尝试创建包含折叠的手风琴项目的页面的链接，每个项目都由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具有展开状态的链接？

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

如何创建折叠手风琴中项目的链接？

1 个答案: