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，并使用该手风琴而不是手风琴类来引用它。此外，我还要确定一个类使用的链接，而不是像我在工作示例代码中所做的那样捕获所有链接。

用锚点打开手风琴面板

1 个答案: