jQuery - 单击按钮时更改 Div 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5616823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Change height of Div on button click
提问by Miles
I've searched this site for awhile and can't find a solution to my problem. Basically I have an unordered list jQuery drop down menu inside a Div and the menu which is being pulled dynamically can be too long for the page so I want to limit the width of the div so the menu is forced to a second line.
我已经在这个网站上搜索了一段时间，但找不到解决我的问题的方法。基本上，我在 Div 中有一个无序列表 jQuery 下拉菜单，并且动态拉出的菜单对于页面来说可能太长，所以我想限制 div 的宽度，以便菜单强制为第二行。
All I need the jQuery to do is animate the size of the div from 36px to 72px when a View More button is clicked.
我需要 jQuery 做的就是在单击“查看更多”按钮时将 div 的大小从 36 像素设置为 72 像素。
Just a basic example:
只是一个基本的例子：
<a href="#" id="button">View More</a>
<div class="container">
<ul id="nav">
<li>Option 1
<ul><li>Sub Option 1</li></ul>
</li>
and so on.
等等。
Any help would be greatly appreciated.
任何帮助将不胜感激。
Thanks.
谢谢。
回答by JohnP
.animate()is what you're looking for : http://api.jquery.com/animate/
.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
});
EDIT
编辑
Live fiddle here http://jsfiddle.net/jomanlk/JJh9z/1/
回答by Brombomb
$("#button").click(function(){
$(".container").animate({
height: "72px"
}, 1500 ); // how long the animation should be
});
