如何在使用toggleClass在大小之間切換時在Div重新排列中停止項目

Question

在click上使用toggleClass將div的大小從10px的寬度調整爲500px，部分是爲了顯示/隱藏內容。問題是，當轉換髮生時，div的內容可以重新排列，直到它們最終溢出並消失。

的JavaScript（jQuery的2.1.1）

$("#id").click(function() { 
$("div.login").toggleClass("closed_div"); 
}); 

CSS

* { 
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -ms-transition:  all 0.2s ease; 
    -o-transition:  all 0.2s ease; 
} 

.div { 
    height: 10px; 
    width: 500px; 
} 

.closed_div { 
    overflow: hidden; 
    width: 10px; 
} 

HTML

<div class="div closed_div"> 
    Content 
</div> 

Answer 1

只需添加white-space: nowrap;到窗體

，並使其更好，如果我是你，我也會在你的表單中加入opacity 0，然後當0.5秒的轉換延遲打開opacity 1時，用戶將永遠不會在div完全打開之前看到表單。

Answer 2

您需要包裝輸入。

<form> 
    <div> 
    <input type="text" placeholder="name" /> 
    <input type="text" placeholder="e-mail" /> 
    <input type="submit" value="Submit" /> 
    </div> 
    </form> 

http://jsbin.com/hucapepofe/1/edit?html,css,js,output