my target slideToggle() div должен быть display:inline-block вместо display:block при его открытии. Есть ли способ изменить поведение jquery здесь?
Изменить:
Я использую jQuery 1.7.0 на данный момент. Кроме того, <div> изначально находится в display:none и должен перейти на display:inline-block после щелчка по ссылке; но, по-видимому, состояние по умолчанию для slideToggle() в этой ситуации равно display:block...
Маленькая птичка сказала мне...
$('#my-block').slideToggle('medium', function() {
if ($(this).is(':visible'))
$(this).css('display','inline-block');
});
Просто попробуйте скрыть свой блок с помощью скриптов (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;
})
Если вы обнаружите, что видите нежелательную "Flash of Unstyled Content", вы также можете использовать встроенный стиль. Обычная мудрость "не ставьте стиль inline" действительно предназначена для вашего основного стиля, а не для визуальных эффектов (эффекты JS все просто добавляют встроенные стили).
Конечно, содержание не будет видно JS-инвалидам поисковых систем пауков, если это важно. Если это не важно, вы хорошо!
Обновление скрипта @fliptheweb: http://jsfiddle.net/GregP/pqrdS/3/
Вы используете старую версию jQuery? Это должно было быть исправлено уже, см. Обсуждение здесь:
Мне понадобился дисплей: flex для переупорядочения элементов со свойством order. Изменение отображения: flex работал, но ему пришлось ждать завершения анимации, чтобы изменить порядок элементов, поэтому был момент, когда все выглядело явно беспорядочным.
Что меня устроило, так это использование опции запуска (см. Документ):
$("your-selector").slideToggle({
duration: 200,
easing: "easeOutQuad",
start: function() {
jQuery(this).css('display','flex');
}
});