javascript - 如何使 jQuery .slideToggle() 看起来是滑动而不是折叠？

Question

我这里有一个例子:http://jsfiddle.net/v127pe9v/

幻灯片按设计工作，但如果您注意到它似乎折叠在滑动框内的元素顶部。我想知道是否有办法使幻灯片在上下移动时看起来统一。

Javascript:

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

HTML:

<button>Click</button>
<div class="slide-box">
    <input placeholder="Enter text">
    <input placeholder="Another text">
    <input placeholder="Third text">
</div>

CSS:

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

编辑:添加一张图片，希望能够说明我的要求:

Answer 1

我认为您的问题是幻灯片框上的填充。

http://jsfiddle.net/v127pe9v/1/

我将您的 CSS 更改为此，我认为这就是您要寻找的效果？

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