我页面里有两个div
 <div id="field" style="width: 100%; display: none;">
        </div>
        <div id="Div1" style="width: 100%; display: none;">
        </div>
 <a id="contraction" style="cursor: pointer; padding-right: 30px;" href="#">收缩</a>
现在想通过点击"收缩"实现这两个div的同时隐藏域展开

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <body>
    <div id="field" style="width: 100%; display:none;">
    1111111111111111</div>
    <div id="Div1" style="width: 100%; display:none;">
    2222222222222222</div>
    <a id="contraction" style="cursor: pointer; padding-right: 30px;" href="javascript:void(0)">展开</a><script>
    document.getElementById('contraction').onclick = function(){
    var field = document.getElementById('field'),
    Div1 = document.getElementById('Div1');

    if(Div1.style.display == 'none' && field.style.display == 'none'){
    field.style.display = 'block';
    Div1.style.display = 'block';
    this.innerHTML = '收缩';
    }else{
    field.style.display = 'none';
    Div1.style.display = 'none';
    this.innerHTML = '展开';
    }
    };
    </script>
    </body>
    </html>
      

  2.   

           function aa() {                    
                if ($get("field").style.display == "none") {
                    $get("field").style.display = "block";
                    $get("Div1").style.display = "block";
                } else {
                    $get("field").style.display = "none";
                    $get("Div1").style.display = "none";
                }
                return false;
            } <a id="contraction" style="cursor: pointer; padding-right: 30px;"  onclick="aa();" href="#">收缩</a>