Как я могу предотвратить изменение ширины при использовании slideUp в jQuery?

Question

У меня есть тестовый пример:

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

Как только содержимое имеет .content, .wrapper сжимается, вероятно, потому что .contentdisplay: 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');
        });
    });
});

1007 *

Answer 3

Вместо отображения: нет, вы можете использовать visibility:hidden, а затем visibility:visible для отображения информации.

display:none

Это будет действовать так, как если бы данных не было на странице, и именно поэтомуоболочка будет уменьшаться при изменении свойства отображения на none

visibility:hidden

Видимость позволяет хранить данные на своем месте на странице, но просто невидима.

Попробуйтеи выясните, поможет ли это вам в вашем вопросе.

Answer 4

Если вы укажете ширину обертки, она останется на том же размере, если вы передвинете слайд, чтобы переключить его дочерний элемент.эта проблема.