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

【问题标题】：change slideToggle() behaviour to display:inline-block instead of display:block?将 slideToggle() 行为更改为 display:inline-block 而不是 display:block？
【发布时间】：2011-11-16 00:07:05
【问题描述】：

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

编辑：

我目前正在使用 jQuery 1.7.0。此外，<div> 最初位于display:none，单击链接后应扩展为display:inline-block；但显然在这种情况下 slideToggle() 的默认状态是display:block ...

【问题讨论】：

标签： jquery css slidetoggle

【解决方案1】：

一只小鸟告诉我...

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

【讨论】：

$('#my-block').slideToggle('medium', function() { if ($(this).is(':visible')) $('this').css('display','inline-block'); }); 小修改。
实际上，将#element的CSS设置为display: inline-block;（在
我知道这很糟糕，但有人可以更深入地解释@K.Weber 的评论吗？
表示使用display:none作为内联样式属性，即<div id="to_toggle" style="display:none">，并在css样式表中设置默认样式（display:inline-block），这样，.slideToggle()，当元素转动时可见，将采用样式表中定义的默认样式 (display:inline-block)
@K.Weber 一旦 DOM（例如，模态窗口）被 fadeToggle 关闭，这将不起作用

【解决方案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;
})

example

【讨论】：

我真的很喜欢这个答案，我唯一遇到的问题是使用 ID 而不是 Class。 .hide() 非常适用于类！谢谢！

【解决方案3】：

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

我的诀窍是使用启动选项 (see doc)：

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

【讨论】：

这对我来说效果很好，虽然在开场动画结束之前有一点内容跳转。比让我所有的幻灯片在页面加载时关闭动画更可取，+1！
完美运行。谢谢你！

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

谢谢，但我认为此错误不适用于此处 - 请参阅我的编辑。
我明白了。在这种情况下，我推荐@fliptheweb 的解决方案

【解决方案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>

【讨论】：