3

私は以下のようなhtmlページを持っています ここに画像の説明を入力してください 、タグコードは：

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

しかし、私は以下のようにページを作りたいです： ここに画像の説明を入力してください

このスクリーンショットでは、列をクリックすると、折りたたまれ、タグが非表示になります。誰かがこれを行う方法を知っていますか？CSSまたはJSを追加しますか？ありがとう

4

3 に答える 3

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 に答える
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;
}

ここでフィドル

于 2012-12-07T09:57:36.273 に答える
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を使用しています。これは、他のJavaScriptを作成するよりも非常に簡単であり、CDNを介してライブラリをロードしているためです。ご覧のとおり、表示または非表示は非常に簡単です。ドキュメントが読み込まれたときに、両方の状態を切り替えて、表示または非表示にします。簡単に取得できるように、要素のIDを含めます（レイアウトを変更したことがわかります）。

設計については、フィールドセットを使用して...投稿した内容を達成するのは複雑になります。それらを簡単に上下に移動するには、2つのdiv、「position：relative」を使用する方が適切です。CSSは、oterの上に1つを配置するz-indexを示しています。これは、上部と左側のプロパティに沿った相対要素と絶対要素でのみ機能します。あなたがそれを好きになることを願っています！

于 2012-12-07T09:42:42.260 に答える