javascript 如何在单击图例时显示和隐藏字段集内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13759886/
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
How to show and hide fieldset content on click of the legend
提问by jimwan
I have a html page as below,
the tags code is :
我有一个 html 页面，如下所示，
标签代码是：
<fieldset>
<legend>Tags</legend>
<div>
<label>
<input type="checkbox" name="col" value="summary" checked="checked" />
Name
</label>
......
</div>
</fieldset>
But i want to make the page as below:
但我想让页面如下：
In this screenshot, when i click the Columns, it will be fold and the tags invisible. Any one know how to do this? Add a CSS or JS? Thanks
在此屏幕截图中，当我单击列时，它将被折叠并且标签不可见。有人知道怎么做吗？添加 CSS 或 JS？谢谢
采纳答案by Chococroc
I know is not fieldset, but its design is looking exactly as the one you posted, so I guess this makes the trick. The code below is what you'r looking for, and some explanations about it are below the code:
我知道不是 fieldset，但它的设计看起来和你发布的一模一样，所以我想这就是诀窍。下面的代码就是你要找的，代码下面有一些关于它的解释：
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#title').click(function(){
$('#tags_check').toggle();
});
})
</script>
<style type="text/css">
#content {
position: relative;
padding: 10px;
}
#title {
border: 1px solid grey;
position: absolute;
background-color: #ccc;
top: -5px;
left: 15px;
z-index: 1;
cursor: pointer;
}
#tags_check {
border: 1px solid grey;
position: relative;
z-index: 0;
top: 3px;
padding: 5px;
}
</style>
</head>
<body>
<div id="content">
<div id="title">Columns</div>
<div id="tags_check">
<input type="checkbox" name="col" value="summary" checked="checked" /> Name1
<input type="checkbox" name="col" value="summary" checked="checked" /> Name2
</div>
</div>
</body>
I'm using jquery, because is incredible easier than writtingh any other javascript, and I'm loading the library via CDN. As you see, show or hide is pretty easy, just when the document is loaded, toggle between both states, show or hide. I include the ID of the elements (as you can see I changed the layout) to pick them up easily.
我正在使用 jquery，因为它比编写任何其他 javascript 容易得多，而且我正在通过 CDN 加载库。如您所见，显示或隐藏非常简单，只需在加载文档时，在显示或隐藏两种状态之间切换。我包含了元素的 ID（如您所见，我更改了布局）以轻松获取它们。
About the desing, with fieldset... is going to be complicated achieve what you posted. Better just two divs, 'position: relative' to move them easily up and down. The CSS shows z-index to put one over the oter, and this only work on relative and absolute elements, along the top and left properties. Hope you like it!
关于设计，使用字段集......实现你发布的内容会很复杂。最好只有两个 div，“位置：相对”可以轻松地上下移动它们。CSS 显示 z-index 将一个放在其他元素上，这仅适用于相对和绝对元素，以及 top 和 left 属性。希望你喜欢！
回答by MrCode
It can be done by first finding all of the legendelements, then assigning an onclickhandler. The handler is assigned to the first divfound in the legend's parent. So this will work even if you have multiple fieldsets and legends on the same page.
这可以通过首先找到所有legend元素，然后分配一个onclick处理程序来完成。处理程序被分配给div在图例的父级中找到的第一个。因此，即使您在同一页面上有多个字段集和图例，这也将起作用。
window.onload = function(){
var legends = document.getElementsByTagName("legend");
for(var i=0; i<legends.length; i++)
{
legends[i].onclick = function()
{
var myDivs = this.parentNode.getElementsByTagName("div");
var myDiv;
if(myDivs.length > 0)
{
var myDiv = myDivs[0];
if(myDiv.style.display == "")
{
myDiv.style.display = "none"
}
else
{
myDiv.style.display = "";
}
}
}
}
};
?
In the demo, I also added CSS to the legend cursor:pointer;, which just shows the hand when you hover over the legend (to indicate to click).
? 在演示中，我还在图例中添加了 CSS cursor:pointer;，当您将鼠标悬停在图例上时，它只会显示手部（以指示单击）。
回答by Tom Sarduy
You can modify the legend using CSS like you do for any other html element. Using Jquery is very simple, just have to do something like this:
您可以像修改任何其他 html 元素一样使用 CSS 修改图例。使用 Jquery 非常简单，只需要做这样的事情：
Jquery:
查询：
$(function(){
$('legend').click(function(){
$(this).nextAll('div').toggle();
$(this).hasClass('hide')?($(this).attr("class", "show")):($(this).attr("class", "hide"));
});
})?
CSS:
CSS：
.hide{
padding-left: 10px;
background: url('img/down.gif') no-repeat left middle;
}
.show:after{
padding-left: 10px;
background: url('img/up.gif') no-repeat left middle;
}
