JQuery toggle（）表现为非线性

我正在创建一些在按下列表项之前一直隐藏的内容

下面是代码片段

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

//html
测试
测试内容
//css
.技能拓展{
边界半径：10px；
宽度：100%；
高度：400px；
显示：无；
背景色：白色；
}
//剧本
$（'.skill list'）.bind（'click'，函数（事件）{
$（this.next（）.toggle（1000）；
});

---

这也是我想要的方式，除了动画的行为怪异。。。下一项的扩展和崩溃是非常非线性的。我的意思是当它被打开时，它会增长一点，收缩一点，然后增长到最大。。。当它关闭它的时候，它的问题是一样的

找不到合适的答案，而是切换到更好的解决方案：

将div的高度设置为0

将显示设置为块集

将溢出设置为隐藏

在jQuery代码中，只需使用.animate（）更改高度px

---

这消除了所有的延迟

A

和A

在任何有效的HTML文档中都不能是同级的。您是否试图使其看起来像这样？随着文本添加到容器中，似乎100%的宽度正在增加。@Jon我不确定你的评论的含义是什么Jon。我的JQuery代码运行良好…@brbcoding是的，这正是我要寻找的，但是在我的chrome浏览器中，我在动画中遇到了口吃