Question

是否可以从同一页面上的常规href链接打开Foundation 6.3手风琴菜单？我使用的是最新的基金会v6.3.1并找到了一些关于这样做的信息，但在我的情况下没有任何作用。

这篇文章似乎有一个理想的解决方案（Trigger opening of a Zurb Foundation Accordion via URL hash link），但它似乎并没有与最新发布的版本混在一起？

Answer 1

是的，有一些替代方法，其应用的确切方式取决于您想要实现的目标，但基本上答案是：＆＃34;使用JavaScript＆＃34;。

这是我的方法：

添加一种识别要打开的每个标签的内容的方法。下面我添加了一个新的数据属性（data-remote）到.accordion-content。
使用该链接创建一个ID，该ID与您要打开的标签上的新data-remote对应。例如id="toggleAco1"＆amp; data-remote="toggleAco1"
使用内置的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。链接将执行的操作与data attributes you include相关联，就像您单击选项卡的折叠标题一样。因此，如果您允许多次打开，那么链接将打开每个链接并保持打开状态，如果您没有（如在例如中）那么一旦新的打开等它们将关闭。

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

1 个答案: