ファウンデーション - 条件付きフォームアイテムを表示

Question

私は財団にとっては少し新しく、既存のアプリケーションフォームのレスポンシブルな再設計に取り組んでいます。このフォームの質問のいくつかは、一般的な質問に答えるタイプのものです。選択に応じて、より多くの情報を入力する必要があります。ここでは非常に基本的な例です：

<fieldset class="row columns"> 
    <legend>Do you like ice cream?</legend> 
    <label><input type="radio" name="icecream" value="Yes">Yes</label> 
    <label><input type="radio" name="icecream" value="No">No</label> 
</fieldset> 

<div id="flavor" class="row columns hide"> 
    <label>What flavor? 
    <input type="text" name="flavor"> 
    </label> 
</div> 

私は、ユーザーが[はい]オプションを選択した場合のみ#flavor div要素を示している行い、デフォルトでそれを隠すか、ユーザーが番号を選択した場合、私は簡単にこれを達成することができますする必要がありますいくつかのjQueryが追加されていますが、Foundationでこれを処理するネイティブな方法がないように感じられます。私はTogglerを使ってみましたが、ラジオ入力ごとに#flavorの状態を指定するのではなく、状態をトグルします。私はRevealを試しましたが、それはモーダルのためだけに設計されているようです。

私はドキュメントを検索しましたが、要素を動的に表示/非表示するための他のビルトインメソッドを見つけることはできません。何か不足していますか？

I've set this up in CodePen if it helps.これは、私が取得しようとしているものを実証するために機能するためのjQueryメソッドを備えています。

Answer 1

jQueryのソリューションは妥当と思われますが、私はchangeに基づいてトリガーしますが、クリック以外のトリガー方法を処理するためのクリックではありません（すなわち、誰かがキーボードナビゲーションを使用して選択した場合）。

ここではtoggle-focusです。入力はフォーカスされていますが、toggle-selectedはありません。あなたがfile an issue around it on the Foundation github repoにしたいと思えば、これはかなり妥当な要求のように思えます。または、自分でビルドすることに興奮していた場合は、インプリメンテーションでプルリクエストを提出することができます。この道を下る場合は、toggle-focusがどのように機能するかをご覧ください。 https://github.com/zurb/foundation-sites/blob/develop/js/foundation.util.triggers.js#L94