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如果用户选择Yes选项，并默认隐藏它或者如果用户选择No.我可以通过一些添加的jQuery轻松完成这个，但我觉得我在基金会缺少一种本地方式来处理这个问题。我已经尝试过使用Toggler，但它切换状态而不是让我为每个无线电输入指定#flavor的状态。我尝试过Reveal，但它似乎仅适用于模态。

我搜索了文档，但似乎找不到任何其他动态显示/隐藏元素的内置方法。我错过了什么吗？

I've set this up in CodePen if it helps.它有jQuery方法，使其能够演示我想要的内容。

Answer 1

在Foundation中没有内置功能可以完全满足您的需求 - 您的jQuery解决方案看起来很合理，但我会基于change触发它而不是点击来处理其他触发方式除了点击（即如果有人选择使用键盘导航）。

基金会内的toggle-focus机制，用于切换时，例如输入是集中的，但没有toggle-selected。这似乎是一个非常合理的请求，如果你想file an issue around it on the Foundation github repo我怀疑有人会建立它。或者，如果您对自己构建它感到兴奋，可以通过实现提交拉取请求，我们会与您合作以获取它。如果您想沿着这条路前进，请查看{{1}在这里工作：https://github.com/zurb/foundation-sites/blob/develop/js/foundation.util.triggers.js#L94

基金会 - 显示条件表单项

1 个答案: