8
votes

JQuery Flexible Masquer / Spectacle de Tableaux

Je veux améliorer certains champs avec l'option d'afficher / masquer leur contenu lors de la cliquant sur leur étiquette.

Actuellement, le HTML ressemble à ceci: p> xxx pré> donc , en cliquant sur un Légende de champs code>, tout sauf que la légende cliquée de la langue parente doit être basculée. p>

J'ai essayé d'utiliser ceci: p>

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

jquery toggle

0 commentaires

3 Réponses :

12
votes

Si j'étais vous, j'envelopperais du contenu de champs de fiches dans DIV et, comme celui-là:

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

2 commentaires

Ouais, bien c'est une façon de le faire bien sûr et cela fonctionnera, c'est toujours un piratage et nécessite que le HTML soit édité: - / Néanmoins, merci.

Comment faire cela un piratage? ... Vous n'avez pas précisé que vous ne vouliez pas modifier le HTML.

10
votes

$(function(){
  $('legend').click(function(){
   $(this).siblings().slideToggle("slow");
  });
});
This works.  It's the same concept really, just the inverse.

2 commentaires

J'ai enveloppé mon contenu dans une div et appelé cette méthode - semble fonctionner bien

Si je vous comprends correctement, vous pouvez le faire avec CSS en réglant l'affichage: Aucun; à n'importe quel élément que vous voulez "fermé" surcharger.

3
votes

Version étendue

HTML (La légende contient [- SPAN): P>

$(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); } );
    });
});

1 commentaires

Il y a 3 réponses pour que Googling for "Tableau Toggle de Légende" et le vôtre était le plus simple + eu des bonus ronds +/- truc. Merci et +1.