jQuery的slideDown()和slideUp()的替代方案不影响显示属性
我一直在尝试对我正在开发的网站使用 SlideDown() 效果,但我很难获得我想要的效果。这是一个示例,显示了我想要完成的任务。
<div>
blahblahblahblah
<span id="span_more" style="display:none">
blahblahblah
</span>
<a class="link_more" id="more">More…</a></div>
</div>
基本上,当单击“更多...”时,我希望当前隐藏的文本使用滑动效果显示,同时与可见文本的末尾保持内联。这对于 SlideDown() 来说似乎不可能,因为它正在将显示更改为阻止。
非常感谢。
I've been trying to use the slideDown() effect for a website I'm working on, but I'm having difficulty getting the effect I want. Here's a sample showing what I want to accomplish.
<div>
blahblahblahblah
<span id="span_more" style="display:none">
blahblahblah
</span>
<a class="link_more" id="more">More…</a></div>
</div>
Basically, when "More..." is clicked, I want the text that's currently hidden to appear using a sliding effect while staying inline with the end of the visible text. This doesn't seem possible with slideDown() because it is changing display to block.
Thank you very much.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(3)
我以前也遇到过这个问题。当时似乎不可能改变 jQuery 的行为,而且我在编写一个对内联块执行相同操作的例程时遇到了问题。因此,我转而仅使用 display: block
元素和 float: left
将它们保持在一行中。
<div>
<div style="display: block; float: left;">blahblahblahblah</div>
<div id="span_more" style="display: none; float: left;">
blahblahblah
</div>
<a style="display: block; float: left;" class="link_more" id="more">More…</a></div>
</div>
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
您需要将始终显示在向左浮动的 span 或 div 中的文本换行,让“附加”文本也向左浮动,并让您的链接
clear: Both;
,但是这种结构将使一个简单的 .slideDown() 工作:这是一个演示,展示了它的实际效果: http://jsfiddle.net/7yqMr/
You'll need to wrap your text that always shows in a span or div that floats left, have the "additional" text float left as well, and have your link
clear: both;
, but this structure will make a simple .slideDown() work:Here's a demo showing this in action: http://jsfiddle.net/7yqMr/