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

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

如果您发现自己看到了不受欢迎的“无格式内容Flash”，您也可以使用内联样式。 “不要把风格内联”的通常智慧真正意味着你的主要风格，而不是视觉效果（JS效果毕竟只是添加内联样式）。

当然，如果这一点非常重要，JS禁用的搜索引擎蜘蛛就不会看到这些内容。如果它不重要，那你很好！

Answer 4

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

使用开始选项（see doc）对我来说是什么窍门：

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

Answer 5

你是旧版本的jQuery吗？这应该已经修复，请参见此处的讨论：