通过 URL link 打开手风琴（基础 v6.3.1）？

Question

是否可以从同一页面上的常规 href link 打开 Foundation 6.3 手风琴菜单？我使用的是最新的 Foundation v6.3.1，并且找到了一些关于这样做的信息，但对我来说没有任何用处。

这个 post 似乎有一个理想的解决方案 (Trigger opening of a Zurb Foundation Accordion via URL hash link) 但它似乎与最新版本不一致？

Answer 1

是的，有一些替代方法，具体应用方法取决于您想要实现的目标，但基本上答案是："use JavaScript".

这是我的方法：

添加一种方法来识别您要打开的每个选项卡的内容。下面我在 .accordion-content.

data-remote

创建一个 link，其 ID 对应于您要使用 link 打开的选项卡上的新 data-remote。例如id="toggleAco1" & data-remote="toggleAco1"
使用 in-built Foundation 函数在点击时切换选项卡（参见下面的 JS/JQ）

所以总的来说是这样的：

HTML

<div class="block">
  <ul class="accordion" data-accordion>
    <li class="accordion-item is-active" data-accordion-item>
      <a href="#" class="accordion-title">Accordion 1</a>
      <div class="accordion-content" data-tab-content data-remote="toggleAco1">
        <p>Panel 1. Lorem ipsum dolor</p>
        <a href="#">Nowhere to Go</a>
      </div>
    </li>
    <li class="accordion-item" data-accordion-item>
      <a href="#" class="accordion-title">Accordion 2</a>
      <div class="accordion-content" data-tab-content data-remote="toggleAco2">
        <textarea></textarea>
        <button class="button">I do nothing!</button>
      </div>
    </li>
    <li class="accordion-item" data-accordion-item>
      <a href="#" class="accordion-title">Accordion 3</a>
      <div class="accordion-content" data-tab-content data-remote="toggleAco3">
        Pick a date!
        <input type="date"></input>
      </div>
    </li>
  </ul>
</div>
<div class="block">
  <a href='#' class="button" id="toggleAco1">Open accordion tab 1</a>
  <a href='#' class="button" id="toggleAco2">Open accordion tab 2</a>
  <a href='#' class="button" id="toggleAco3">Open accordion tab 3</a>
</div>

JS/JQ

$('a').on('click', function() {
    var dataTarget = $(this).attr('id');
    $('.accordion').foundation('toggle', $('[data-remote="' + dataTarget + '"]'));
});

N.B。 links 所做的是 linked 到 data attributes you include，就像您单击选项卡的手风琴标题一样。因此，如果您允许 multi-opening，那么 link 将分别打开并保持打开状态，如果您不允许（例如），那么它们将在新的打开后关闭等。

通过 URL link 打开手风琴（基础 v6.3.1）？

Opening an Accordion via URL link (foundation v6.3.1)?

accordion

zurb-foundation