怎么做展开于折叠

  怎么做展开与折叠这个功能呢？请高手给我一个明示，谢谢了。

解决方案 »

  1.   

    只要显示层或隐藏层就行了，设置一下层的display属性
      

  2.   

    想展开的时候设置div显示，想折叠时设置div隐藏就可以了！
    给一个例子参考一下js控制div的显示与隐藏
      

  3.   


    document.getElementById("s").style.display = "none";隐藏
    document.getElementById("s").style.display = "block";显示
      

  4.   

    红色为收缩效果的关键代码
    html页面代码：红色的是引用jquery都需要加的那个文件你自己找一下
    <!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" />
    <link type="text/css" rel="stylesheet" href="css/main.css" />
    <link type="text/css" rel="stylesheet" href="css/firstuse.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/head.js"></script>
    <title></title>
    <script type="text/javascript">
    $(document).ready(function()
    {
     $("#faq").addClass("on");});
     function munChange(obj){
        var p = obj.getElementsByTagName("p")[1];
        var pp = obj.nextSibling;
        var t = p.innerHTML;
        var s = pp.style.display;
        if(s=="block" || s==""){
          p.innerHTML = "展开";
          pp.style.display="none";
        }else{
         p.innerHTML = "收缩";
            pp.style.display="block";
        }
     }    </script>
    </head>
    <body>
    <div  class="maincontent">
      <div id="headjs"></div>
      <!--头部-->
     <div class="container" style="background:#FFFFFF;">
      <div class="firstuse">
       <div class="FU_rm"><img src="images/registdeveloper.jpg" alt="常见问题解答" /></div>
       <div class="onequeson">
        <div class="FU_title" onclick="munChange(this)" style="cursor: pointer;"><p class="FU_titleL">能力开放PaaS云服务</p><p class="FU_titleR">展开</p></div>
        <div class="FU_wenzi" style="display: none;">
         <p>开发者可通过开发者门户提供的下载链接下载离线应用开发工具，可下载的工具包括SCE、SDK、widget设计器等。开发者可通过开发者门户提供的下载链接下载离线应用开发工具，可下载的工具包括SCE、SDK、widget设计器等。</p>
         <p>开发者可通过开发者门户提供的下载链接下载离线应用开发工具，可下载的工具包括SCE、SDK、widget设计器等。</p>
        </div>
       </div>
       <div class="onequeson">
        <div class="FU_title" onclick="munChange(this)" style="cursor: pointer;"><p class="FU_titleL">能力开放PaaS云服务</p><p class="FU_titleR">展开</p></div>
        <div class="FU_wenzi" style="display: none;">
         <p>开发者可通过开发者门户提供的下载链接下载离线应用开发工具，可下载的工具包括SCE、SDK、widget设计器等。开发者可通过开发者门户提供的下载链接下载离线应用开发工具，可下载的工具包括SCE、SDK、widget设计器等。</p>
         <img src="images/appPic1.jpg" />
         <img src="images/appPic1.jpg" />
         <p>开发者可通过开发者门户提供的下载链接下载离线应用开发工具，可下载的工具包括SCE、SDK、widget设计器等。</p>
        </div>
       </div>
       
       
       <div class="onequeson">
        <div class="FU_title" onclick="munChange(this)" style="cursor: pointer;"><p class="FU_titleL">能力开放PaaS云服务</p><p class="FU_titleR">展开</p></div>
        <div class="FU_wenzi" style="display: none;">
         <p>开发者可通过开发者门户提供的下载链接下载离线应用开发工具，可下载的工具包括SCE、SDK、widget设计器等。开发者可通过开发者门户提供的下载链接下载离线应用开发工具，可下载的工具包括SCE、SDK、widget设计器等。</p>
         <p>开发者可通过开发者门户提供的下载链接下载离线应用开发工具，可下载的工具包括SCE、SDK、widget设计器等。</p>
        </div>
       </div>
      </div>
     </div>
     <div style="clear:both;"></div>
     <div class="footer" id="footjs"></div>
    </div>
    </body>
    </html>