JQuery toggle（）表现为非线性

Question

我正在创建一些隐藏的内容，直到按下列表项为止。

以下是代码段

// html
<li class="skill-list">test</li>
<div class="skill-expand">
    test content
</div>

// css
.skill-expand{
    border-radius: 10px;
    width:100%;
    height:400px;
    display: none;
    background-color: white;
}

// script
$('.skill-list').bind('click', function(event) {
    $(this).next().toggle(1000);
});

这也是我想要它的方式，除了动画很奇怪......下一个项目的扩展和折叠非常非线性。我的意思是当它被打开时，它会增长一点，缩小一点然后增长到最大......当它关闭它同样的问题...

Answer 1

找不到合适的答案，转而使用更好的解决方案：

1. 将div的高度设置为0
2. 将显示设置为阻止设置
3. 将溢出设为隐藏
4. 在您的jQuery代码中，只需使用.animate（）
更改高度px

这消除了所有延迟