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）を追加しました。
2. そのリンクで開くタブの新しいdata-remoteに対応するIDを持つリンクを作成します。例えば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にリンクされ、タブのアコーディオンタイトルをクリックした場合と同じです。だから、あなたがマルチオープンを許可すると、リンクはそれぞれ開いて開いたままにします。そうしなければ（例えば）、新しいものが開いたら閉じます。