アンカー付きアンカーパネルを開きます

Question

アンカーをFoundationのアコーディオンで開く簡単な方法はありますか？ （codepenで利用可能）

私の単純なコード

<a href="#panel1" class="link">Open the first panel</a> 
<a href="#panel2" class="link">Open the second panel</a> 


<ul class="accordion" data-accordion> 
    <li class="accordion-item" data-accordion-item> 
    <a href="#" class="accordion-title">Accordion 1</a> 
    <div class="accordion-content" data-tab-content> 
     I would start in the open state, due to using the `is-active` state class. 
    </div> 
    </li> 

    <li class="accordion-item" data-accordion-item> 
    <a href="#" class="accordion-title">Accordion 2</a> 
    <div class="accordion-content" data-tab-content> 
     I would start in the open state, due to using the `is-active` state class. 
    </div> 
    </li> 
</ul> 

私は財団のマニュアルを経ていますが、事前に設計されたシステムについての言及はありません。

この種のシステムで私を助けてくれる人はいますか？私はそれをする方法を知らないと告白します。

ありがとうございます。

Answer 1

あなたはjQueryのUIライブラリを追加した場合、この追加のコードはあなたの例のために動作します：

$(".accordion").accordion(); 
$('a').on('click',function() { 
    $('.accordion').accordion("option", "active", $(this).index()); 
}) 

CodePen：個人的にhttp://codepen.io/anon/pen/YZQxWd

、私はアコーディオンに固有のIDを追加し、それを参照したいですアコーデオンのクラスの代わりにそれを使用しています。また、私は実際のサンプルコードで行ったように、すべてのリンクをキャッチする代わりに、クラスで使用するリンクを釘付けにしています。