jQuery - 按钮点击更改div的高度
问题描述:
我搜索了这个网站一段时间,找不到我的问题的解决方案。基本上我有一个无序的列表jQuery下拉菜单里面一个Div和被动态拉动的菜单可能对于页面来说太长,所以我想限制div的宽度,所以菜单被强制到第二行。jQuery - 按钮点击更改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>
等。
任何帮助将不胜感激。
谢谢。
答
.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
});
编辑
答
$("#button").click(function(){
$(".container").animate({
height: "72px"
}, 1500); // how long the animation should be
});
谢谢,这完美! – Miles 2011-04-11 21:44:49