jQuery灵活隐藏/显示fieldsets

Question

我想增强一些字段集,可以选择在单击标签时显示/隐藏其内容.

目前,HTML看起来像这样:

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

因此,在单击一个时fieldset legend,应切换除父项字段集的单击图例之外的任何内容.

我试过用这个:

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

但它没有做任何事情(甚至没有隐藏内容).当然我只想切换用户点击的字段集上的视图,因此它必须以某种方式确定单击的图例,然后隐藏相应字段集的内容.

当然,我可以给他们所有的ID,并为每个字段集编写代码,但这相当多余,看到它总是一样的我认为必须有一种方法可以使这个功能对于任何数量的字段集都是通用的......

任何人都有一个整洁的想法？

Answer 1

如果我是你,我会在div中包含fieldset的内容,就像那样:

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

因此,现在当您单击标签时,它将向上/向下滑动内容并使您的标签可见.

Answer 2

$(function(){
  $('legend').click(function(){
   $(this).siblings().slideToggle("slow");
  });
});

这有效.它实际上是相同的概念,只是反过来.