앵커가있는 accordeon 패널 열기

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를 추가하고 참조 것 그 대신 아코디언 클래스를 사용합니다. 또한, 작업 예제 코드에서했던 것처럼 모든 링크를 잡는 대신 클래스에서 사용하는 링크를 찾아 냈습니다.