我对基金会有点新手,正在为现有的申请表做出响应式重新设计。此表单中的一些问题属于您回答相当一般性问题的类型,然后根据您的选择,您可能需要输入更多信息。这是一个非常基本的例子:
<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方法,使其能够演示我想要的内容。
答案 0 :(得分:0)
在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