[摘要]
有时候网页上大段内容可能会影响到排版，我们可以通过折叠功能，让有需求的网友自行选择是略过还是展开，本文提供一段简单实用的jQuery特效。
最近在学习js的过程中越来越感受到jQuery的魅力，这个著名的js框架极大的简化了JavaScript编程，本来需要用复杂原生js代码实现的效果可以用jQuery轻松实现，今天分享一小段经典的点击折叠展开内容特效。
看这个例子：
这里是要折叠的内容。
.
.
再次点击收起内容...
点击上面的按钮，看看效果！
对，就是这么小巧实用，使用情景：在写博客的时候，里面分享一段特别长的代码，影响了排版，我们可以通过此功能进行折叠，有需要的读者点开进行查阅，比较人性化。当然不限于此，技术是死的，思路是活的。
代码部分：
html部分
<div class="fold-box"> <p>这里是要折叠的内容。</p> <p>再次点击收起内容...</p> </div> <div class="fold-button"> <span class="open">展开</span> <span class="close" style="display:none;">收起</span> </div>
js部分
$(function(){
$(".fold-button").click(function(){
$(".fold-box").slideToggle("slow");
$(".open").toggle();
$(".close").toggle();
});
});
记得这是jQuery特效，要在页面<head>里引入jQuery库文件，不赘述。
css部分
.fold-box{
padding:10px;
background:#e5eecc;
border:solid 1px #c3c3c3;
display:none;
margin: 10px;
}
.fold-button{
text-align: center;
margin:0px;
padding:5px;
}
.fold-button span{
display: inline-block;
padding: 5px 15px;
background-color: #32a5e7;
color: #fff;
border-radius: 2px;
cursor: pointer;
}
这是笔者自用的，如果你有更好的方案，可以留言分享。
延伸：slideToggle()
slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
语法：
$(selector).slideToggle(speed,callback)
其中speed规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
可能的值：毫秒 （比如 1500）、"slow"、"normal"、"fast"
本文最后更新于2017年2月25日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
粤公网安备 44040402000065号
没能默认先显示一些内容吗？
一般情况下展开 这种效果视觉上都是向下撑开的感觉，有没有办法实现 视觉上是“向上”撑开的效果呢
@wuke： 因为从上向下展开是符合用户阅读习惯的，如果从下向上撑开，上面的内容被顶上去，不太符合阅读习惯
这个逻辑思维要够清晰
还不错，不是很长的文章不用添加翻页，用折叠隐藏式不错的选择，你的代码可以再简化一下，用jq来添加移除class的话比较好
@何先生： 个人感觉代码不冗余呀，fold-button选择器绑定click事件，.fold-box选择器用slideToggle()效果来滑动显示或隐藏；同时下面两个按钮“展开”“收起”用toggle()效果切换显隐，默认收起display：none；总体效果：内容隐藏、收起按钮隐藏，展开按钮显示，点击按钮触发内容的slideToggle()效果和按钮的toggle(）效果，内容滑动打开，展开按钮隐藏，收起按钮显示。
值得学习的技巧
强大的jquery，有右上角弹出菜单的特效没？，手机端的
@boke112导航：![[强]](https://www.yaxi.net/wp-content/themes/wing/img/smilies/qiang.gif)
老古总是先人一步，NANA主题可谓是集万千精华于一体啊 ![[坏笑]](https://www.yaxi.net/wp-content/themes/wing/img/smilies/huaix.gif)
确实，这个真心很喜欢的，特别是文章内插入代码、知识等内容的时候运用“展开”可以有效的解决文章过长的问题！总之，这是个很高大上的功能！目前很多主题内的短代码都支持的！
@明月登楼： 是啊，是个比较人性化的东西，集成短代码在编辑器，还是蛮方便的。