jQuery - 按鈕點擊更改div的高度

Question

我搜索了這個網站一段時間，找不到我的問題的解決方案。基本上我有一個無序的列表jQuery下拉菜單裏面一個Div和被動態拉動的菜單可能對於頁面來說太長，所以我想限制div的寬度，所以菜單被強制到第二行。

所有我需要jQuery做的是當單擊View More按鈕時，將div的大小從36px設置爲72px。

只是一個基本的例子：

<a href="#" id="button">View More</a> 

<div class="container"> 
    <ul id="nav"> 
    <li>Option 1 
    <ul><li>Sub Option 1</li></ul> 
    </li> 

等。

任何幫助將不勝感激。

謝謝。

Answer 1

.animate()是你在找什麼：http://api.jquery.com/animate/

#cont { 
    border: 1px solid #000; 
    height: 36px; 
    overflow:hidden; 
} 
<a href="#" id="button">View More</a> 
<a href="#" id="button2">View Even More</a> 
<div id='cont'> 
    <ul> 
     <li>an item</li> 
     <li>an item</li> 
     <li>an item</li> 
     <li>an item</li> 
     <li>an item</li> 
     <li>an item</li> 

    </ul> 
</div> 

$('#button').click(function(){ 
    $('#cont').animate({height:'72px'}, 500); 
    //this method increases the height to 72px 
}); 

$('#button2').click(function(){ 
    $('#cont').animate({height: '+=36'}, 500); 
    //This method keeps increasing the height by 36px 
}); 

編輯

現場小提琴這裏http://jsfiddle.net/jomanlk/JJh9z/1/

Answer 2

$("#button").click(function(){ 
    $(".container").animate({ 
    height: "72px" 
    }, 1500); // how long the animation should be 
});