我想通过单击标签来显示/隐藏其内容的选项来增强一些字段集.
目前,HTML看起来像这样：
<fieldset>
<legend>Fieldset 1</legend>
<!-- Some input,p,div,whatever -->
</fieldset>
<fieldset>
<legend>Fieldset 2</legend>
<!-- Some input,whatever -->
</fieldset>
因此,在单击一个字段集图例时,应切换除父项字段集的单击图例之外的任何内容.
我试过用这个：
$("fieldset *:not(legend)").hide();
$("fieldset legend").click(function(){
$(this).nextAll().slidetoggle();
});
但它没有做任何事情(甚至没有隐藏内容).当然我想只在用户点击的字段集上切换视图,因此它必须以某种方式确定单击了哪个图例,然后隐藏相应字段集的内容.
当然,我可以给他们所有的ID,并为每个字段集编写代码,但是相当多余的看到它总是一样的我认为必须有一种方法来使这个功能对于任何数量的字段集都是通用的…
任何人都有一个整洁的想法？
解决方法
如果我是你,我会在div中包含fieldset的内容,就像那样：
<script type="text/javascript">
$(function(){
$('legend').click(function(){
$(this).parent().find('.content').slidetoggle("slow");
});
});
</script>
<fieldset>
<legend>Fieldset 1</legend>
<!-- Some input,whatever -->
<div class="content">
this<br />
is<br />
content<br />
</div>
</fieldset>
<fieldset>
<legend>Fieldset 2</legend>
<!-- Some input,whatever -->
<div class="content">
this<br />
is<br />
content<br />
</div>
</fieldset>
因此,现在当您单击标签时,它将向上/向下滑动内容并使您的标签可见.