Изменить поведение slideToggle() для отображения: inline-block вместо отображения: block?

my target slideToggle() div должен быть display:inline-block вместо display:block при его открытии. Есть ли способ изменить поведение jquery здесь?

Изменить:

Я использую jQuery 1.7.0 на данный момент. Кроме того, <div> изначально находится в display:none и должен перейти на display:inline-block после щелчка по ссылке; но, по-видимому, состояние по умолчанию для slideToggle() в этой ситуации равно display:block...

Ответы

Ответ 1

Маленькая птичка сказала мне...

$('#my-block').slideToggle('medium', function() {
    if ($(this).is(':visible'))
        $(this).css('display','inline-block');
});

Ответ 2

Просто попробуйте скрыть свой блок с помощью скриптов (dont display:none через стили)

HTML

<div class="ib">inline-block</div> <a href="#" class="toggle">toggle this</a>

CSS

.ib{
    display:inline-block;
    background:red;
}

JavaScript

$(".ib").hide();
$(".toggle").bind("click", function(){
    $(".ib").slideToggle();
    return false;
})

пример

Ответ 3

Если вы обнаружите, что видите нежелательную "Flash of Unstyled Content", вы также можете использовать встроенный стиль. Обычная мудрость "не ставьте стиль inline" действительно предназначена для вашего основного стиля, а не для визуальных эффектов (эффекты JS все просто добавляют встроенные стили).

Конечно, содержание не будет видно JS-инвалидам поисковых систем пауков, если это важно. Если это не важно, вы хорошо!

Обновление скрипта @fliptheweb: http://jsfiddle.net/GregP/pqrdS/3/

Ответ 4

Вы используете старую версию jQuery? Это должно было быть исправлено уже, см. Обсуждение здесь:

http://bugs.jquery.com/ticket/2185

Ответ 5

Мне понадобился дисплей: flex для переупорядочения элементов со свойством order. Изменение отображения: flex работал, но ему пришлось ждать завершения анимации, чтобы изменить порядок элементов, поэтому был момент, когда все выглядело явно беспорядочным.

Что меня устроило, так это использование опции запуска (см. Документ):

$("your-selector").slideToggle({
  duration: 200,
  easing: "easeOutQuad",
  start: function() {
    jQuery(this).css('display','flex');
  }
});