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

Posted 2023-02-25

【中文标题】将 slideToggle() 行为更改为 display:inline-block 而不是 display:block？

【英文标题】：change slideToggle() behaviour to display:inline-block instead of 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 ...

【参考方案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>