1

折りたたまれたアコーディオン項目を含むページへのリンクを作成しようとしています。各項目は 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 を展開状態にするリンクを作成するにはどうすればよいですか?

4

1 に答える 1

0

アコーディオンAPIのドキュメントはそれほど簡単に理解できるわけではなく、activate()関数が宣伝どおりに機能していないように見えるため、これは見た目よりも少し注意が必要です。

あなたの質問から、divIDを参照してアコーディオンセクションを開きたいようです。これはそのままでは不可能です。0ベースのインデックスを使用してのみセクションを識別できます（たとえば、0 =最初のセクション、1 = 2番目のセクションなど）。

そうは言っても、このアプローチは機能します。

次のようにリンクを定義します。

<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);
于 2012-05-01T05:22:21.230 に答える