jquery这种自适应高度为啥不行呢

本帖最后由 chinaphp2005 于 2015-01-11 22:52:47 编辑

解决方案 »

  1.   

    <!doctype html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <style>
    #div1 {border: 1px solid #ff0000; overflow: hidden; width:160px;    }
    li{width:100px;height:20px;background:#06F;border:#F60 solid 2px;}
      .cla{height:100px;}
    </style>
    <body>
     <input type="button" value="更多" onclick="$('#div1').toggleClass('cla')"/>
    <div id="div1" class="cla">
       <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
      </ul>
    </div>
    </body>
    </html>
      

  2.   

    <!doctype html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <style>
    #div1 {border: 1px solid #ff0000; overflow: hidden; width:160px;    }
    li{width:100px;height:20px;background:#06F;border:#F60 solid 2px;}
      .cla{height:100px;}
    </style>
    <body>
     <input type="button" value="更多" onclick="ff()"/>
    <div id="div1" class="cla">
       <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
      </ul>
    </div>
    </body>
    </html>
    <script>
      var h=$('#div1 ul');
      h=h.height()+parseFloat(h.css('margin-top').replace(/px/ig,''));
      var d=$('#div1');
      function ff(){
      d.animate({height:d.height()==h?'100px':h+'px'},'fast')
      }
      </script>