Question

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

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

一旦内容有.content，.wrapper缩小包装本身，大概是因为.content是display: none。我希望.wrapper的行为就像动画后.content仍然存在一样，保持初始大小。

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

有简单的解决方法吗？

Answer 1

要使其动态化，请尝试以下方法：

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

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

Answer 2

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

.wrapper{
    width: 200px;
}

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

Answer 3

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

display:none

这就好像数据不在页面上一样，这就是为什么一旦display属性变为none

，包装器就会缩小的原因

visibility:hidden

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

尝试一下，看看这是否可以帮助您解决问题。

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

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

4 个答案: