3

I have a html page as below, enter image description here 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: enter image description here

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

4

3 回答 3

1

您可以像修改任何其他 html 元素一样使用 CSS 修改图例。使用 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;
}

在这里提琴

于 2012-12-07T09:57:36.273 回答
1

这可以通过首先找到所有legend元素，然后分配一个onclick处理程序来完成。处理程序分配给div在图例的父项中找到的第一个。因此，即使您在同一页面上有多个字段集和图例，这也将起作用。

jsFiddle 演示

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

};

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

于 2012-12-07T09:08:55.757 回答
0

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

<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，因为它比 writtingh 任何其他 javascript 都容易得多，而且我正在通过 CDN 加载库。如您所见，显示或隐藏非常简单，只需在加载文档时，在两种状态之间切换，显示或隐藏。我包括元素的 ID（如您所见，我更改了布局）以轻松获取它们。

关于设计，使用字段集...实现您发布的内容会很复杂。最好只有两个 div，“位置：相对”，以便轻松上下移动它们。CSS 显示 z-index 将一个放在 oter 上，这仅适用于相对和绝对元素，沿 top 和 left 属性。希望你喜欢！

于 2012-12-07T09:42:42.260 回答