如何使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%;
}