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

Question

是否可以从同一页面上的常规href链接打开Foundation 6.3手风琴菜单？我正在使用最新的Foundation v6.3.1，并且发现了一些关于这样做的信息，但没有任何效果在我的案例中。

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

Answer 1

是的，有一些替代方法，它的实际应用方式取决于你想达到的目的，但基本上答案是：“使用JavaScript”。

这是我的方法：

1. 添加识别要打开的每个选项卡的内容的一种手段。在下面我添加了一个新的数据属性（data-remote）到.accordion-content。
2. 创建一个链接，该链接的id与您想用该链接打开的选项卡上的新data-remote相对应。例如id="toggleAco1" & data-remote="toggleAco1"
3. 使用内置的基础性作用来打开单击该选项卡（参见下面的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 + '"]')); 
}); 

• 甲simple JSFiddle example
• The advanced options from the docs

N.B.链接将会链接到data attributes you include，就像您单击手风琴标题的标签一样。所以，如果你允许多次打开，那么链接将打开每个打开，如果你不（如在例如），那么他们将关闭，一旦一个新的打开等。