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

Question

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

编辑：

我现在正在使用 jQuery 1.7.0。此外，

最初位于 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

我需要 display:flex 来使用 order 属性对元素进行重新排序。
更改为 display:flex 有效，但必须等待动画完成才能重新排列元素，因此有一段时间一切看起来都明显混乱。

对我来说，窍门是使用启动选项（参见文档）：

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

Answer 4

如果您发现自己看到不需要的“Flash of Unstyled Content”，您也可以使用内联样式。通常的智慧“不要将样式内联”实际上是针对您的主要样式，而不是视觉效果（毕竟JS效果都只是添加内联样式）。

当然，如果内容很重要的话，禁用 JS 的搜索引擎蜘蛛将看不到该内容。如果这不重要的话，你就很好了！

@fliptheweb 的小提琴更新： http://jsfiddle.net/GregP/pqrdS/3/

Answer 5

您使用的是旧版本的 jQuery 吗？这个问题应该已经修复了，请参阅此处的讨论：

http://bugs.jquery.com/ticket/2185< /a>

Answer 6

我建议使用以下技巧。它将允许您使用“隐藏”类，同时避免由于过早或延迟发生布局更改而导致的任何闪烁。

（使用display:flex和direction:row来明确它显示为flex而不是块）

function toggle() {
  let elem = $(".component")
  if (elem.hasClass("hidden")) {
    elem.css("display", "none");
    elem.removeClass("hidden");
  }
  elem.slideToggle(200);
}

.component {
  display: flex;
  flex-direction: row;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="toggle" onclick="toggle();">toggle this</a>
<div class="component hidden">
  <div>item1</div>
  <div>item2</div>
</div>