jquery - 使用jQuery的slideUp时如何防止宽度变化？

Question

我在这里有一个测试用例：

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

一旦内容具有.content，.wrapper收缩包装自己，大概是因为.contented display: none。我希望在动画之后.wrapper表现得好像.content仍然存在，保持初始大小。

已编辑.wrapper以float: left显示问题（通过强制收缩包装行为），但可能并非总是如此，所以我想要一个不涉及在动画之前读取框的宽度并重新应用它的解决方案后。

有简单的解决方法吗？

Answer 1

或使其动态尝试以下操作：

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

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

Answer 2

我个人会这样做：

$('.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');
        });
    });
});

​</p>

Answer 3

如果您指定包装器的宽度，如果您滑动切换它的子级，它将保持相同的大小。

.wrapper{
    width: 200px;
}

我不确定是否有更好/更通用的解决方案来解决这个问题。

Answer 4

visibility:hidden您可以使用然后visibility:visible显示信息，而不是使用 display:none 。

display:none

这将表现得好像数据不在页面上，这就是为什么一旦显示属性更改为none

visibility:hidden

可见性允许数据仍然存储在页面上的位置，但只是不可见的。

试试这个，看看这是否对你的问题有帮助。