jQuery：阅读更多/更少幻灯片切换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8849865/
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
jQuery: Read More/Less Slide Toggle?
提问by Jezthomp
I'm after a simple slide toggle for a read more link then when expanded a read less link.
我正在通过简单的滑动切换来获取更多阅读链接，然后在展开阅读更少链接时。
Exactly like thisbut needs to slide down rather than just appear like that.
完全像这样，但需要向下滑动而不是像那样出现。
The initial height needs to be set as well whether through words or box height.
无论是通过文字还是盒子高度，都需要设置初始高度。
Any ideas, is it fairly simple to achieve?
任何想法，实现起来是否相当简单？
Thanks for any help :)
谢谢你的帮助 ：）
回答by Christopher
It's simple, yet effective.
这很简单，但很有效。
$(".button").click(function(){
var moreAndLess = $("p").is(':visible') ? 'More' : 'Less';
$(this).text(moreAndLess);
$("p").slideToggle();
});
回答by Lubor Bílek
The example you mentioned use toggle() function, which just shows or hides the element (display: block / hidden) without any effect.
您提到的示例使用 toggle() 函数，它只是显示或隐藏元素（显示：块/隐藏）而没有任何效果。
You have to use slideToggle() function, which does the same thing, but with sliding effect.
你必须使用 slideToggle() 函数，它做同样的事情，但具有滑动效果。
$("button").click(function(){
$("p").slideToggle();
});
回答by atmd
you could use jquery's built in functions to .slide() or animate()
您可以使用 jquery 的内置函数来 .slide() 或 animate()
so instead of using:
所以而不是使用：
$('#someElement').html('some content');
try
尝试
$('#someElement').html('some content').slideDown(some speed ie 600);
you'd need to hide (ie display:none) the content area first. maybe wrap the content in a div with a id/class and set that to display:none
您需要先隐藏（即显示：无）内容区域。可能将内容包装在带有 id/class 的 div 中，并将其设置为 display:none
