javascript - 打开带有 anchor 的 Accordion 面板

Question

有没有一种简单的方法可以用基金会的 Accordion 打开 anchor ？

我的简单代码(可在 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());
})

代码笔:http://codepen.io/anon/pen/YZQxWd

就个人而言，我会向该 Accordion 添加一个特定的 ID，并使用它而不是 Accordion 的类来引用它。另外，我会确定类使用的链接，而不是像我在工作示例代码中所做的那样捕获所有链接。