jQuery 将 slideToggle() 行为更改为 display:inline-block 而不是 display:block？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8144944/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change slideToggle() behaviour to display:inline-block instead of display:block?
提问by iHaveacomputer
my target slideToggle()div needs to be display:inline-blockinstead of display:blockwhen it's open. Is there a way to change the jquery behavior here?
我的目标slideToggle()div 需要是display:inline-block而不是display:block打开时。有没有办法在这里更改 jquery 行为？
Edit:
编辑：
i'm using jQuery 1.7.0 at the moment. Also, the <div>is initially at display:noneand should expand to display:inline-blockafter a click on a link; but apparently the default state for slideToggle() in this situation is display:block...
我目前正在使用 jQuery 1.7.0。此外，<div>最初位于display:none并且应该display:inline-block在单击链接后扩展到；但显然在这种情况下 slideToggle() 的默认状态是display:block......
回答by black
A little birdie told me...
一只小鸟告诉我...
$('#my-block').slideToggle('medium', function() {
if ($(this).is(':visible'))
$(this).css('display','inline-block');
});
回答by fliptheweb
Just try to hide your block via scripts (dont display:nonevia styles)
试着通过脚本隐藏你的块（不要display:none通过样式）
HTML
HTML
<div class="ib">inline-block</div> <a href="#" class="toggle">toggle this</a>
CSS
CSS
.ib{
display:inline-block;
background:red;
}
JavaScript
JavaScript
$(".ib").hide();
$(".toggle").bind("click", function(){
$(".ib").slideToggle();
return false;
})
回答by Eloy Ruiz
I needed the display:flexfor reordering elements with the orderproperty. Changing to display:flexworked but it had to wait for the animation to complete to rearrange the elements, so there was a moment where everything looked clearly disordered.
我需要display:flex来重新排序具有order属性的元素。更改为display:flex有效，但它必须等待动画完成才能重新排列元素，因此有一段时间一切看起来都明显混乱。
What did the trick for me was using the start option (see doc):
对我来说，使用 start 选项的诀窍是什么（参见文档）：
$("your-selector").slideToggle({
duration: 200,
easing: "easeOutQuad",
start: function() {
jQuery(this).css('display','flex');
}
});
回答by Greg Pettit
If you find yourself seeing an unwanted "Flash of Unstyled Content" you could also use an inline style. The usual wisdom of "don't put style inline" is really meant for your main styling, not for visual effects (JS effects all just add inline styles after all).
如果您发现自己看到不想要的“无样式内容Flash”，您也可以使用内联样式。“不要将样式内联”的通常智慧实际上是针对您的主要样式，而不是用于视觉效果（JS 效果毕竟只是添加内联样式）。
Of course, the content won't be seen by JS-disabled search engine spiders, if that's important. If it's not important, you're good!
当然，禁用 JS 的搜索引擎蜘蛛不会看到这些内容，如果这很重要的话。如果这不重要，你很好！
Update of @fliptheweb's fiddle: http://jsfiddle.net/GregP/pqrdS/3/
@fliptheweb 的小提琴更新：http: //jsfiddle.net/GregP/pqrdS/3/
回答by Alex Peattie
Are you on an old version of jQuery? This should have been fixed already, see discussion here:
您使用的是旧版本的 jQuery 吗？这应该已经修复了，请参阅此处的讨论：
