我已经在这个网站上搜索了一段时间,但找不到解决我问题的方法。基本上我在 Div 中有一个无序列表 jQuery 下拉菜单,动态拉动的菜单对于页面来说可能太长,所以我想限制 div 的宽度,这样菜单就被强制到第二行。
我需要 jQuery 做的就是在单击“查看更多”按钮时将 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
});
编辑
现场 fiddle http://jsfiddle.net/jomanlk/JJh9z/1/
关于jQuery - 单击按钮更改 Div 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5616823/