expand height div高度

Question

我有2個水平放置的div（float:left; width:50%;）。但我想給他們height:500px與overflow:hidden和底部顯示展開/ coolapse按鈕。如何用jQuery創建它？

<div id="tab-two"> 

     <ul class="nav"> 
      <li class="nav-one"><a href="#featured" class="current">last</a></li> 
      <li class="nav-two"><a href="#core">popular</a></li> 
     </ul> 

     <div class="list-wrap"> 

      <ul id="tabclick"> 

       <li> 
      ***content***      
          </li> 
      </ul> 

     </div> 

    </div> 
<style> 
#tab-two { 
background: none repeat scroll 0% 0% #FFFFFF; 
border-radius: 4px 4px 4px 4px; 
border-right: 1px solid #CCCCCC; 
margin: 0pt 1% 5px 0pt; 
padding: 1px 0pt 0pt 5px; 
} 
</style> 

Answer 1

我沒有看到你的代碼中有2個div，它們的功能與上述相同。我爲你工作。你應該可以編輯它以適應你的HTML/CSS標籤：

<style type="text/css"> 

.floatBox { 
    position: relative; 
    float: left; 
    width: 50%; 
    height: 500px; 
    overflow: hidden; 
    display: block; 
} 

.boxContent { 
    display: table; 
} 

a.expandLink { 
    width: 100%; 
    height: 30px; 
    background: #059; 
    color: #fff; 
    position: absolute; 
    bottom: 0; 
    text-align: center; 
    display: block; 
} 

</style> 


<script> 

var collapseH = 500; // set the height of your collapse state 

$(document).ready(function() { 
    $('.expandLink').click(function() { 
     var $link = $(this); 
     var $box = $link.parents('.floatBox'); // get parent with class="floatBox" 
     var innerH = $box.children('.boxContent').innerHeight(); // get height of inner HTML 
     var linkH = $link.height(); // get height of link to add to your animation 

     if ($box.height() == collapseH) { // if the box is collapsed 

      // animate to full inner height 
      $box.stop().animate({ 
       height: innerH+linkH 
      }, 500); 

      // change text of link 
      $link.html('collapse'); 

     } else { // if it is expanded 

      // animate to collapsed height 
      $box.stop().animate({ 
       height: collapseH 
      }, 500); 

      // change text of link 
      $link.html('expand'); 

     } 

     return false; 
    }); 
}); 

</script> 


<div id="container" style="width: 800px;"> 
    <div class="floatBox"> 
     <div class="boxContent"> 
      <!-- PUT YOUR CONTENT HERE --> 
     </div> 
     <a href="#" class="expandLink">expand</a> 
    </div> 
    <div class="floatBox"> 
     <div class="boxContent"> 
      <!-- PUT YOUR CONTENT HERE --> 
     </div> 
     <a href="#" class="expandLink">expand</a> 
    </div> 
</div>