jQueryアコーディオンの質問

Question

私はスライドに応じていくつかのDIVを開いてjQueryのUIを使用しようとしています。リンクを他の場所に配置し、そのIDに応じて特定のDIVをターゲットにしたい。これをどうやってやりますか？正しい方向で私を指すヒントはありますか？ソートのこのような

何か：

<script> 
    jQuery().ready(function() { 
     jQuery("#accordion").accordion({ 
      collapsible: true, 
      active: false, 
      navigation: true 
     }); 
    }); 
</script> 

と：

<h3><a href="#1">Section 1</a></h3> 
<h3><a href="#2">Section 2</a></h3> 
<h3><a href="#3">Section 3</a></h3> 
<h3><a href="#4">Section 4</a></h3> 

<div id="accordion"> 
    <div id="1"> 
     <p>content</p> 
    </div> 
    <div id="2"> 
     <p>content</p> 
    </div> 
    <div id="3"> 
     <p>content</p> 
    </div> 
    <div id="4"> 
     <p>content</p> 
    </div> 
</div> 

Answer 1

activateメソッドを使用できます。

シグニチャー

.accordion("activate" , index) 

プログラムアコーディオンのコンテンツ部分をアクティブ。インデックスには、閉じるためのヘッダーの位置を一致させるためのゼロインデックス番号、または要素に一致するセレクタを使用できます。すべてを閉じるにはfalseを渡します（collapsibleでのみ可能：true）。 $(link).click(function(){})を使用して

購入、あなたがクリックされた要素のIDを選択することができ、 のようなactivateメソッドのインデックスでIDを渡す：あなたがアップとダウン時にアコーディオンのスライドを作成しようとしている

.accordion("activate" , "#" + id); 

Answer 2

あなたはもっとこのように見える何かをしたいです。

<div id="accordion"> 
    <h3><a href="#1">Section 1</a></h3>  
    <div id="1"> 
     <p>content</p> 
    </div> 
    <h3><a href="#2">Section 2</a></h3> 
    <div id="2"> 
     <p>content</p> 
    </div> 
    <h3><a href="#3">Section 3</a></h3> 
    <div id="3"> 
     <p>content</p> 
    </div> 
    <h3><a href="#4">Section 4</a></h3> 
    <div id="4"> 
     <p>content</p> 
    </div> 
</div> 

Answer 3

ページの他の場所でクリックしますか？もしあなたがそうであれば、私はちょうどあなたがクリックしたいアコーディオン見出しのクリックイベントを呼び出します。そのようなリンク「activateAccordion」をクリックするときは、セクション1のスライドを上下に作ることができます

<a href='' id='activateAccordion' /> 

<div id="accordion"> 
    <h3><a href="#section1">Section 1</a></h3>  
    <div id="section1"> 
     <p>content</p> 
    </div> 
    <h3><a href="#section2">Section 2</a></h3> 
    <div id="section2"> 
     <p>content</p> 
    </div> 
</div> 

：以下アコーディオンのマークアップで例えば

$('#activateAccordion').click(function() { 
    $('a ##section1').click(); 
}); 

Answer 4

ここソリューションのjsfiddleです。

わずかに変更されたHTML：（classとhref属性に注目してください）：activate methodを使用して

<h3><a class='acc-link' href="#1">Section 1</a></h3> 
<h3><a class='acc-link' href="#2">Section 2</a></h3> 
<h3><a class='acc-link' href="#3">Section 3</a></h3> 
<h3><a class='acc-link' href="#4">Section 4</a></h3> 

<div id="accordion"> 
    <h3 id="1"><a href="#"></a></h3> 
    <div> 
     <p>content</p> 
    </div> 
    <h3 id="2"><a href="#"></a></h3> 
    <div> 
     <p>content</p> 
    </div> 
    <h3 id="3"><a href="#"></a></h3> 
    <div> 
     <p>content</p> 
    </div> 
    <h3 id="4"><a href="#"></a></h3> 
    <div> 
     <p>content</p> 
    </div> 
</div> 

JS：

jQuery().ready(function() { 
    var acc = $("#accordion").accordion({ 
      collapsible: true, 
      active: false, 
      navigation: true 
    }); 

    $('.acc-link').click(function() { 
     acc.accordion("activate", $(this).attr('href')); 
    }); 
}); 

もう一つ注意すべき：activateメソッドに渡されたhref属性引数CSSセレクタとして解釈されます。これは便宜的に（かつ偶然に）#セレクタで始まります。したがって、有効なIDで「動作する」だけです。