如何在使用jQuery的slideUp時防止寬度發生變化？

Question

我有一個測試用例在這裏：

http://www.jsfiddle.net/kPBbb/

一旦內容有.content的.wrapper收縮包裝本身，大概是因爲.content是display: none版。我希望.wrapper表現得好像.content在動畫之後仍然存在，保持了初始大小。

的.wrapper一直float: left版爲了顯示問題（通過強制拆封行爲），但並不總是，所以我想一個解決方案，不涉及閱讀的寬度在動畫之前將其放入盒子中，然後重新應用。

有沒有簡單的解決方法？

Answer 1

如果您指定包裝的寬度，它將保持相同的大小，如果您滑動切換它的一個孩子。

.wrapper{ 
    width: 200px; 
} 

我不確定是否有更好/更通用的解決方案來解決這個問題。

Answer 2

而不是使用display：none您可以使用visibility:hidden，然後使用visibility:visible來顯示信息。

display:none 

這將作爲如果數據不是在頁面上，這就是爲什麼一旦顯示屬性更改爲none

visibility:hidden 

能見度的包裝將收縮本身允許的數據仍然是存儲在頁面上的位置，但僅僅是看不見的。

試試看，看看這是否有助於你的問題。

Answer 3

或者使其動態嘗試以下操作：

var contentWidth = $('.content').width(); 

$('.header').width(contentWidth); 

Answer 4

我會親自做：

$('.wrapper').each(function() { 
    var wrapper = this; 
    $('.header', wrapper).click(function() { 
    $(this).css('width',$(this).width()); 
    $('.content', wrapper).slideToggle(); 
    }); 
});​ 

但是，也許你甚至可以這樣做：

$('.wrapper').each(function() { 
    var wrapper = this; 
    $('.header', wrapper).click(function() { 
     $('.content', wrapper).slideToggle('slow',function(){ 
      $('.content', wrapper).show(); 
      $('.content', wrapper).css('visibility','hidden'); 
      $('.content', wrapper).css('height','0px'); 
     }); 
    }); 
});