基础 - 显示条件表单项

Question

我对 Foundation 有点陌生，正致力于对现有申请表进行响应式重新设计。此表单中的一些问题属于您回答相当笼统的问题的类型，然后根据您的选择，您可能需要输入更多信息。这是一个非常基本的例子：

<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，但它似乎只为模态设计。

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

I've set this up in CodePen if it helps. 它具有 jQuery 方法来使其发挥作用以演示我想要达到的目的。

Answer 1

Foundation 中没有内置函数可以完全满足您的需求 - 您的 jQuery 解决方案似乎很合理，但我会根据 change 而不是点击来触发它处理除点击之外的其他触发方式（即如果有人选择使用键盘导航）。

Foundation 中是一个toggle-focus 机制，用于切换，例如输入已聚焦，但没有 toggle-selected。如果您想file an issue around it on the Foundation github repo I suspect someone would build it. Or if you were excited to build it yourself, you could submit a pull request with the implementation and we'd work with you to get it in. If you want to go down this road, take a look at how the toggle-focus works here: https://github.com/zurb/foundation-sites/blob/develop/js/foundation.util.triggers.js#L94

，这似乎是一个非常合理的要求

基础 - 显示条件表单项

Foundation - Showing Conditional Form Items

forms

zurb-foundation

zurb-foundation-6