jQuery - 单击按钮时更改 Div 的高度

Question

我已经在这个网站上搜索了一段时间，但找不到解决我的问题的方法。基本上我在 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>

等等。

任何帮助将不胜感激。

谢谢。

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