Foundation - Bedingte Formularelemente anzeigen

Question

Ich bin ein wenig neu bei Foundation und arbeite an einem reaktionsschnellen Redesign für ein bestehendes Anwendungsformular. Einige der Fragen in diesem Formular sind von der Art, in der Sie eine ziemlich allgemeine Frage beantworten. Je nach Ihrer Auswahl müssen Sie möglicherweise weitere Informationen eingeben. Hier ist ein sehr einfaches Beispiel:

<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> 

Was ich tun muß, ist nur die #flavor div zeigen, wenn der Benutzer die Option Ja auswählt, und verstecken sie standardmäßig oder wenn der Benutzer Nein wählt kann ich dies leicht erreichen mit ein paar zusätzlichen jQuery, aber ich habe das Gefühl, dass ich einen nativen Weg vermisse, um das in Foundation zu handhaben. Ich habe versucht, Toggler zu verwenden, aber es schaltet den Zustand um, anstatt mich den Status von #flavor für jede Radioeingabe spezifizieren zu lassen. Ich habe Reveal ausprobiert, aber es scheint nur für Mods gedacht zu sein.

Ich habe die Dokumente durchsucht, finde aber keine anderen integrierten Methoden zum dynamischen Anzeigen/Ausblenden von Elementen. Fehle ich etwas?

I've set this up in CodePen if it helps. Es hat die jQuery-Methode, damit es funktioniert, um zu demonstrieren, was ich versuche zu bekommen.

Answer 1

Es gibt keinen eingebauten innerhalb Foundation, die genau das tut, was Sie hier suchen - Ihre jQuery-Lösung scheint vernünftig, obwohl ich es basierend auf einem anstelle eines Klicks auslösen würde, um andere Möglichkeiten der Auslösung außer klicken (dh wenn jemand die Tastaturnavigation auswählt).

Dort ist ein toggle-focus Mechanismus innerhalb der Foundation zum Umschalten, wenn z. Ein Eingang ist fokussiert, aber kein toggle-selected. Dies scheint wie eine ziemlich vernünftige Anfrage, wenn Sie file an issue around it on the Foundation github repo Ich vermute, jemand würde es bauen. Oder wenn Sie aufgeregt waren, es selbst zu bauen, könnten Sie eine Pull-Anfrage mit der Implementierung einreichen und wir würden mit Ihnen zusammenarbeiten, um es zu bekommen. Wenn Sie diesen Weg gehen wollen, schauen Sie sich an, wie die toggle-focus hier funktioniert: https://github.com/zurb/foundation-sites/blob/develop/js/foundation.util.triggers.js#L94