jQuery：阅读更多/更少幻灯片切换？答案

【问题标题】：jQuery: Read More/Less Slide Toggle?jQuery：阅读更多/更少幻灯片切换？
【发布时间】：2012-02-09 14:45:19
【问题描述】：

我正在为阅读更多链接进行简单的滑动切换，然后在展开阅读较少链接时。

与this 完全一样，但需要向下滑动而不是像那样显示。

无论是文字还是框高，都需要设置初始高度。

任何想法，实现起来是否相当简单？

感谢您的帮助:)

【问题讨论】：

【解决方案1】：

简单而有效。

$(".button").click(function(){
  var moreAndLess = $("p").is(':visible') ? 'More' : 'Less';
  $(this).text(moreAndLess);

  $("p").slideToggle();
});

【讨论】：

【解决方案2】：

你可以使用 jquery 的内置函数来 .slide() 或 animate()

所以不要使用：

$('#someElement').html('some content');

试试

$('#someElement').html('some content').slideDown(some speed ie 600);

您需要先隐藏（即显示：无）内容区域。也许将内容包装在带有 id/class 的 div 中，并将其设置为 display:none

【讨论】：

【解决方案3】：

你提到的例子使用了toggle()函数，它只是显示或隐藏元素（显示：块/隐藏）没有任何效果。

你必须使用 slideToggle() 函数，它做同样的事情，但有滑动效果。

$("button").click(function(){
  $("p").slideToggle();
});

【讨论】：