與錨定打開accordeon面板

Question

會有一種簡單的方法來打開與基金會的手風琴錨？

我簡單的代碼（上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添加到手風琴和引用它使用它而不是手風琴類。另外，我會指定一個類來使用鏈接，而不是捕獲所有鏈接，就像我在工作示例代碼中所做的那樣。