jquery slideToggle() 不是“滑入”而是滑出

Posted 2023-02-25

【中文标题】jquery slideToggle() 不是“滑入”而是滑出

【英文标题】：jquery slideToggle() not "sliding" in but out

【发布时间】：2012-02-29 15:37:58

【问题描述】：

代码如下：

$('span.faqanswer').hide();
$('strong.faqlink').css('cursor','pointer').click(function()
    $(this).parent().find('span.faqanswer').slideToggle();
);

如果您单击 span.faqlink，它只会切换而不是滑动切换。如果您再次单击它会滑动切换。 这发生在任何过程中。向下滑动只是切换，向上滑动切换...

【参考方案1】：

jQuery 的动画依赖于具有height 和width 的元素。由于span 是一个内联元素，它没有设置或可设置这些尺寸，因此动画将不起作用。

它在向上滑动时工作，因为显示设置为inline-block，并且可以动画。

如果可以更改标记，我建议您将 span 包裹在 div 中，然后滑动 div。

工作演示 - http://jsfiddle.net/ShankarSangoli/yTeAY/

【参考方案2】：

首先尝试$('span.faqanswer').slideUp(); 而不是$('span.faqanswer').hide();。

http://jsfiddle.net/RbpAq/

或者先给 span.faqanswer 元素 display:none 一个样式，然后删除 $('span.faqanswer').hide();

http://jsfiddle.net/tFFX6/1/

【参考方案3】：

如果您要让元素水平滑入，请不要使用slideToggle()。使用animate()。

http://api.jquery.com/slideToggle/

.slideToggle() 方法为匹配元素的高度设置动画。这会导致页面的下部向上或向下滑动，显示或隐藏项目。

否则，按照@ShankarSangoli 所说的方式包装内联元素。