Question

我有一个html页面如下， enter image description here 标签代码是：

<fieldset>
          <legend>Tags</legend>
          <div>
              <label>
                <input type="checkbox" name="col" value="summary" checked="checked" />
                Name
              </label>
                  ......
                   </div>
        </fieldset>

但我想将页面设为如下： enter image description here

在此屏幕截图中，当我单击列时，它将折叠并且标签不可见。有人知道怎么做吗？添加CSS还是JS？感谢

Answer 1

您可以像使用任何其他html元素一样使用CSS修改图例。使用Jquery非常简单，只需要做这样的事情：

Jquery的：

$(function(){
    $('legend').click(function(){  
        $(this).nextAll('div').toggle();
        $(this).hasClass('hide')?($(this).attr("class", "show")):($(this).attr("class", "hide"));
    });
})

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

<强> Fiddle here

Answer 2

首先找到所有legend元素，然后分配onclick处理程序即可完成。处理程序被分配给在图例的父级中找到的第一个div。因此，即使您在同一页面上有多个字段集和图例，这也会有效。

<强> jsFiddle Demo

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 = "";
                }
            }
        }
    }

};

在演示中，我还在图例cursor:pointer;中添加了CSS，当您将鼠标悬停在图例上时，它会显示手牌（表示单击）。

Answer 3

我知道不是字段集，但它的设计看起来与你发布的完全一样，所以我想这就是诀窍。以下代码是您正在寻找的代码，有关它的一些解释低于代码：

<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（你可以看到我改变了布局）以便轻松地拾取它们。

关于设计，使用fieldset ...将会很复杂，实现您发布的内容。最好只有两个div，＆＃39; position：relative＆＃39;轻松上下移动它们。 CSS显示z-index将一个放在oter上，这只适用于顶部和左侧属性的相对和绝对元素。希望你喜欢！

如何在单击图例时显示和隐藏字段集内容

3 个答案:

Jquery的：

CSS：