jQuery flexible ein - /ausblenden des fieldsets

Möchte ich erhöhen einige fieldsets mit der option zum anzeigen /verbergen Ihren Inhalt bei Klick auf Ihrem label.

Derzeit die HTML sieht wie folgt aus:

<fieldset>
    <legend>Fieldset 1</legend>
    <!-- Some input, p, div, whatever -->
</fieldset>
<fieldset>
    <legend>Fieldset 2</legend>
    <!-- Some input, p, div, whatever -->
</fieldset>

Also, klicken Sie auf eines fieldset legend nichts, aber die geklickt Legende des übergeordneten fieldset sollte ein-und ausgeschaltet werden.

Ich habe versucht mit diesem:

$("fieldset *:not(legend)").hide();
$("fieldset legend").click(function(){
    $(this).nextAll().slideToggle();
});

Aber es nicht tun (auch nicht ausblenden der Inhalte in den ersten Platz). Natürlich will ich nur Umschalten der anzeigen auf dem sehr fieldset, den der Benutzer geklickt hat, es muss also irgendwie bestimmen, was der Legende angeklickt wurde, und dann verstecken Sie den Inhalt des entsprechenden fieldsets.

Sicher, ich konnte Ihnen alle IDs und schreiben Sie den code für jedes fieldset, aber das ist eher redundant zu sehen, es würde immer das gleiche ich denke, es ist ein Weg, um diese Funktionalität universell für jede Menge fieldsets...

Jemand eine nette Idee?

InformationsquelleAutor Florian Peschka | 2009-11-26
  1. 11

    Wenn ich du wäre würde ich wrap Inhalt fieldset in der div, und es auch so:

    <script type="text/javascript">
        $(function(){
            $('legend').click(function(){
                $(this).parent().find('.content').slideToggle("slow");
            });
        });
</script>

<fieldset>
    <legend>Fieldset 1</legend>
    <!-- Some input, p, div, whatever -->
    <div class="content">
        this<br />
        is<br />
        content<br />
    </div>
</fieldset>
<fieldset>
    <legend>Fieldset 2</legend>
    <!-- Some input, p, div, whatever -->
    <div class="content">
        this<br />
        is<br />
        content<br />
    </div>
</fieldset>

    So, jetzt, wenn Sie auf das Etikett, rutscht der Inhalt nach oben/unten und lassen Sie Ihr label sichtbar.

    • Ja, auch das ist ein Weg, es zu tun, natürlich, und es funktioniert, trotzdem ist es ein hack und erfordert den HTML-Code bearbeitet werden :-/ Trotzdem danke.
    • Wie macht das ein hack?... Sie nicht angeben, dass Sie nicht wollen, ändern Sie den HTML -.
    InformationsquelleAutor rochal
  2. 10
    $(function(){
  $('legend').click(function(){
   $(this).siblings().slideToggle("slow");
  });
});

    Dieser funktioniert. Es ist das gleiche Konzept wirklich, nur die Umkehrung.

    • ich wickelte meinen Inhalt in einem div-Element und nannte diese Methode scheint gut zu funktionieren
    • funktioniert gut. Wie man auf den laden geschlossen?
    • Wenn ich Sie richtig verstehe, kannst du das mit CSS die Einstellung display: none; zu was auch immer element, das Sie wollen, "geschlossen" onLoad".
    InformationsquelleAutor creativetim
  3. 3

    Extended version

    HTML (Legende enthält [-] Spannweite):

    <fieldset>
    <legend>My Area <span>[-]</span></legend>
    Content of fieldset...
</fieldset>

    JavaScript (benötigt jQuery):

    $(function(){
    //Set cursor to pointer and add click function
    $("legend").css("cursor","pointer").click(function(){
        var legend = $(this);
        var value = $(this).children("span").html();
        if(value=="[-]")
            value="[+]";
        else
            value="[-]";
       $(this).siblings().slideToggle("slow", function() { legend.children("span").html(value); } );
    });
});
    • Es gibt 3 SO Antworten, wenn Sie googeln für "fieldset Umschalten von Legende" und Ihre war die einfachste + hatte Bonusrunde +/- Dingens. Dank & +1.
    InformationsquelleAutor Joachim Werner
Schreibe einen Kommentar