jQuery 灵活隐藏/显示字段集
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1802896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery flexible hide/show of fieldsets
提问by F.P
I want to enhance some fieldsets with the option to show / hide their contents upon clicking their label.
我想通过单击标签时显示/隐藏其内容的选项来增强某些字段集。
Currently, the HTML looks like this:
目前，HTML 如下所示：
<fieldset>
<legend>Fieldset 1</legend>
<!-- Some input, p, div, whatever -->
</fieldset>
<fieldset>
<legend>Fieldset 2</legend>
<!-- Some input, p, div, whatever -->
</fieldset>
So, on click of one fieldset legend, anything but the clicked legend of the parent fieldset should be toggled.
因此，单击 one 时fieldset legend，应切换除父字段集的单击图例之外的任何内容。
I tried using this:
我尝试使用这个：
$("fieldset *:not(legend)").hide();
$("fieldset legend").click(function(){
$(this).nextAll().slideToggle();
});
But it doesn't do anything (not even hide the contents in the first place). Of course I want to only toggle the view on the very fieldset the user has clicked, so it has to somehow determine what legend was clicked and then hide the contents of the corresponding fieldsets.
但它没有做任何事情（甚至不首先隐藏内容）。当然，我只想在用户单击的字段集上切换视图，因此它必须以某种方式确定单击了什么图例，然后隐藏相应字段集的内容。
Sure, I could give them all IDs and write the code for every fieldset, but thats rather redundant seeing it would always be the same I think there has to be a way to make this functionality universal for any amount of fieldsets...
当然，我可以给他们所有的 ID 并为每个字段集编写代码，但是看到它总是相同的，我认为必须有一种方法使这个功能对任何数量的字段集通用......
Anyone has a neat idea?
任何人都有一个巧妙的主意？
回答by rochal
If I was you I'd wrap content of fieldset in div, and to it like that:
如果我是你，我会将 fieldset 的内容包装在 div 中，然后像这样：
<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 now when you click on the label it will slide the content up/down and leave your label visible.
所以现在当你点击标签时，它会向上/向下滑动内容并使你的标签可见。
回答by creativetim
$(function(){
$('legend').click(function(){
$(this).siblings().slideToggle("slow");
});
});
This works. It's the same concept really, just the inverse.
这有效。这实际上是相同的概念，只是相反。
回答by Joachim Werner
Extended version
扩大的视野
HTML (legend contains [-] span):
HTML（图例包含 [-] 跨度）：
<fieldset>
<legend>My Area <span>[-]</span></legend>
Content of fieldset...
</fieldset>
JavaScript (requires jQuery):
JavaScript（需要 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); } );
});
});
