更改slideToggle()行为以显示:inline-block而不是display:block？

Question

我的目标slideToggle() div需要display:inline-block而不是display:block它打开时.有没有办法在这里改变jquery行为？

编辑:

我目前正在使用jQuery 1.7.0.此外,<div>最初是在display:none并且应该display:inline-block在点击链接后扩展到; 但显然这种情况下slideToggle()的默认状态是display:block......

Answer 1

一只小鸟告诉我......

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

实际上,将_#element_的CSS设置为`display:inline-block;`(在<style>块或样式表中)和`display:none;`作为字段的样式属性更容易.然后,当它切换到可见时,它只是定义了默认样式 (17认同)
这意味着使用`display:none`作为内联样式属性,这是`<div id ="to_toggle"style ="display:none">`并在css样式表中设置默认样式(`display:inline-block`)这样,`.slideToggle()`,当元素变为可见时,将采用样式表中定义的默认样式(`display:inline-block`) (7认同)
`$('#my-block').slideToggle('medium',function(){if($(this).is(':visible'))$('this').css('display',' inline-block');});`次要编辑. (3认同)

Answer 2

试着通过脚本隐藏你的块(不要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;
})

Answer 3

我需要display：flex用于使用order属性对元素进行重新排序。更改为display：flex可以工作，但是必须等待动画完成才能重新排列元素，因此有一瞬间，所有内容看上去都明显混乱了。

对我来说，诀窍是使用开始选项（请参阅doc）：

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