Javascript 如何使jQuery.slideToggle（）显示为滑动而不是折叠？

我举了一个例子：

幻灯片按设计工作，但如果您注意到它出现在滑动框内的项目顶部，它正在塌陷。我想知道是否有办法使幻灯片在上下移动时看起来一致

Javascript:

$(function(){
    $("button").click(function(){
        $(".slide-box").slideToggle("down");
    });
});

HTML:

编辑：添加一张图片，希望能说明我的问题：

---

我认为您的问题在于幻灯片框上的填充物

我把你的CSS改成了这个，我想这就是你想要的效果吧

* { box-sizing: border-box; }
.slide-box {
    border: 1px solid black;
    display: none;
}
.slide-box input {
    display: block;
    margin: 10px;
    width: 100%;
}

---

如果我们保留填充物怎么办？有其他方法修复吗？不幸的是我不这么认为。jQuery向上/向下滑动通过在高度、边距和填充属性上设置动画来工作。因此，只要要使用slideUp或down设置动画的元素具有上/下填充或边框，jQuery就会设置这些值的动画。避免这种情况的唯一方法是用这些属性来补偿另一个元素，就像我在输入上做的那样。我很确定我已经讨论过这一点，因为有人告诉我这是一个填充问题。这看起来确实更好，但并不完全是我想要描述的。想象一个抽屉，当你打开抽屉时，里面的所有东西都以同样的速度向外移动，因为它们都被放在抽屉里。幻灯片切换显示的效果就像内容保持在原来的位置，但方框上下关闭。有道理吗？有道理。如果我能抽出时间看看的话，我就玩玩它。不幸的是，我仍然认为，由于jquery是如何为顶部和底部填充/边距设置动画的，如果不编写自己的代码，您将永远无法真正获得这种效果。换句话说，不使用滑动切换，可能只是使用动画功能。

* { box-sizing: border-box; }
.slide-box {
    border: 1px solid black;
    display: none;
    padding: 30px;
}
.slide-box input {
    display: block;
    margin-bottom: 15px;
    width: 100%;
}

* { box-sizing: border-box; }
.slide-box {
    border: 1px solid black;
    display: none;
}
.slide-box input {
    display: block;
    margin: 10px;
    width: 100%;
}