如何在点击图例时显示和隐藏字段集内容 [英] How to show and hide fieldset content on click of the legend
问题描述
我有一个html页面如下：
标签代码是：
I have a html page as below, the tags code is :
<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:
在此屏幕截图中，当我单击列被折叠和标签看不见。任何人知道如何做到这一点？添加CSS或JS？感谢
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
推荐答案
我知道不是字段集，但它的设计看起来完全与您发布的一样，招。下面的代码是你想要的，有关它的一些解释在代码下面：
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:
<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>
我使用jquery，因为比任何其他javascript更容易，该库通过CDN。如你所见，显示或隐藏很容易，只是当文档加载时，在两个状态之间切换，显示或隐藏。我包括元素的ID（如你所见，我改变了布局）轻松地接受它们。
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.
关于设计，与fieldset ...将去复杂实现你发布的。更好的只是两个div，位置：相对，以便轻松地上下移动。 CSS显示z-index将一个放在oter上，这只能工作在相对和绝对元素，沿顶部和左边的属性。希望你喜欢它！
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!
这篇关于如何在点击图例时显示和隐藏字段集内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
