每刷新一次网页,div中获得信息使其高度不定,也就是div自适应高度的,帮忙写个js。初始状态折叠

解决方案 »

  1.   

    折叠展开有的是代码,可以搜。高度自适应就用CSS设置HEIGHT:AUTO。
      

  2.   

    不太明白楼主的意思,建议楼主需求说详细一点,我试着写一段代码,基本能实现折叠功能,但不知道是不是楼主需要的,希望对楼主有所帮助:<!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>
    <style type="text/css">
         #divDemo{
    width:200px;
    height:25px;
    border:#00F solid 1px;
    overflow:hidden;
    }
        </style>
        <script>
         function control(obj){
    var divDemo = document.getElementById('divDemo');
    if(obj.value == "展开"){
    divDemo.style.height = "auto";
    divDemo.style.overflow = "auto";
    obj.value = "收起";
    }
    else{
    divDemo.style.height = 25 + "px";
    divDemo.style.overflow = "hidden";
    obj.value = "展开";
    }
    }
        </script>
    </head>
    <body>
    <div id="divDemo">
         <input type="button" value="展开" onclick="control(this)"/>
            <ul>
             <li>第一个新闻</li>
                <li>第二个新闻</li>
                <li>第三个新闻</li>
                <li>第四个新闻</li>
                <li>第五个新闻</li>
            </ul>
        </div>
    </body>
    </html>
      

  3.   

    <!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=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript" language="javascript" src="jquery.js"></script>
    <style type="text/css">
    .menu_list {
    width: 150px;
    }
    .menu_head {
    padding: 8px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
        font-weight:bold;
        background: #93cdff;
    }
    .menu_body {
    display:none;
    }
    .menu_body a 
    {
    padding:8px 0px;
    display:block;
    color:#006699;
    background-color:#EFEFEF;
     padding-left:10px;
    font-weight:bold;
    text-decoration:none;
    }
     .menu_body a:hover {
    color:#7fb2f4;
    background-color:#dfdfdf;
    text-decoration:underline;
    }
    </style>
    <script type="text/javascript">
     $(function(){
                $("#firstpane p.menu_head").click(function()
                {
                    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");           
                });
                $("#firstpane p.menu_head").mouseover(function()
                {
                   $(this).css({background:"#2286c6"});
                });
                $("#firstpane p.menu_head").mouseout(function()
                {
                   $(this).css({background:"#93cdff"});
                });
            });s
    </script>
    </head><body>
    <div id="firstpane" class="menu_list">
      <p class="menu_head">菜单1</p>
        <div class="menu_body">
    <a href="#">子菜单1</a>
    <a href="#">子菜单2</a>
    <a href="#">子菜单3</a>
        </div>
     <p class="menu_head">菜单2</p>
        <div class="menu_body">
    <a href="#">子菜单1</a>
    <a href="#">子菜单2</a>
    <a href="#">子菜单3</a>
        </div>
    <p class="menu_head">菜单3</p>
        <div class="menu_body">
    <a href="#">子菜单1</a>
    <a href="#">子菜单2</a>
    <a href="#">子菜单3</a>
        </div>
    <p class="menu_head">菜单4</p>
        <div class="menu_body">
    <a href="#">子菜单1</a>
    <a href="#">子菜单2</a>
    <a href="#">子菜单3</a>
        </div>
    </div>
    </body>
    </html>
    这样的?
      

  4.   


    <!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>
        <title>Test</title>
        <style>
            ul
            {
                padding: 0px;
                margin: 0px;            
            }
            ul ul
            {
                margin-left: 15px;
                display:none;
            }
            li
            {
              margin-top:5px;
             }
        </style>
        <script type="text/javascript">
            function show(obj){
                var bigUl=obj.parentNode.parentNode;           
                var liList=bigUl.getElementsByTagName("li");
                 
                for(var i=0;i<liList.length;i++)
                {
                    var smallUl=liList[i].getElementsByTagName("ul");
                    if(smallUl.length>0)
                    {
                        if(liList[i]==obj.parentNode)
                        {
                            smallUl[0].style.display="block";
                        }
                        else
                        {
                            smallUl[0].style.display="none";
                        }
                    }
                }
                 
                 
            }
        </script>
    </head>
    <body>
        <ul>
            <li><a href="#" >java1</a>
                <ul >
                    <li>j2ee</li>
                    <li>jsp</li>
                    <li>j2me</li>
                    <li>j2ee</li>
                    <li>jsp</li>
                    <li>j2me</li>
                    <li>j2ee</li>
                    <li>jsp</li>
                    <li>j2me</li>
                </ul>
            </li>
            <li><a href="#">net2</a>
                <ul>
                    <li>aspnet</li>
                    <li>winform</li>
                    <li>netmoblie</li>
                     <li>aspnet</li>
                    <li>winform</li>
                    <li>netmoblie</li>
                     <li>aspnet</li>
                    <li>winform</li>
                    <li>netmoblie</li>
                </ul>
            </li>
              <li><a href="#">java3</a>
                <ul>
                    <li>j2ee</li>
                    <li>jsp</li>
                    <li>j2me</li>
                    <li>j2ee</li>
                    <li>jsp</li>
                    <li>j2me</li>
                    <li>j2ee</li>
                    <li>jsp</li>
                    <li>j2me</li>
                </ul>
            </li>
            <li><a href="#">net4</a>
                <ul>
                    <li>aspnet</li>
                    <li>winform</li>
                    <li>netmoblie</li>
                </ul>
            </li>
            <li><a href="#">net5</a>
                <ul>
                    <li>aspnet</li>
                    <li>winform</li>
                    <li>netmoblie</li>
                </ul>
            </li>
            <li><a href="#">net6</a>
                <ul>
                    <li>aspnet</li>
                    <li>winform</li>
                    <li>netmoblie</li>
                </ul>
            </li>
            <li><a href="#" >net7</a>
                <ul>
                    <li>aspnet</li>
                    <li>winform</li>
                    <li>netmoblie</li>
                </ul>
            </li>
        </ul>
        <script type="text/javascript">
            var aList=document.getElementsByTagName("a");
            for(var i=0;i<aList.length;i++)
            {
                aList[i].onmousemove=function(){
                    show(this); 
                };
            }
        </script>
    </body>
    </html>
      

  5.   

    用JQ,一行代码足以,有好框架就要用,才10几K
    slidetoggel(2000);
      

  6.   

    好像没有我需要的
    <div class="colspan">
    <div class="title">统计的</div>
    <div class="data"><%=get from server%></div>
    </div>层中嵌套两个层,层<div class="data">内容是从服务器获取,所以高度是变化的,很多代码都是有高度限制的,不适合我的要求。现在我想在“统计的”三个字右边加个"+",点击展开下面的层,同时变为“-”,再点击下面那一层折叠起来。