jQuery - 버튼 클릭시 Div의 높이 변경

Question

잠시 본 사이트를 검색 한 결과 내 문제의 해결책을 찾을 수 없습니다. 기본적으로 div 내에서 순서가없는 jQuery 드롭 다운 메뉴가 있으며 동적으로 가져 오는 메뉴는 너무 길어 페이지가 두 번째 줄에 강제로 표시되도록 div의 너비를 제한하려고합니다.

모두보기 더보기 버튼을 클릭 할 때 div의 크기를 36px에서 72px로 움직이는 것이 jQuery에서 필요합니다.

그냥 기본 예제 :

<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 
});