jquery实现内容的折叠与展开

来源：互联网发布：hexo highlight.js 编辑：程序博客网时间：2024/05/04 00:01

一描述

1.内容多的时候是折叠的效果，如图

2.点击更多按钮，内容文字展开，效果如图

二代码实现

1.html代码

<!DOCTYPE html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>js文本段落展开和收拢效果</title>    <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script></head><body>    <div id="container"><div id="wrap"><div>    <h1>这一段文字是可以折叠展开的，点击下面的“更多”就可以展开，点击下面的“折叠”就可以折叠</h1></div></div><div id="read-more"></div>    </div></body></html>

2.js代码，最关键的

$(function() {var slideHeight = 45; // px 定义折叠的最小高度var defHeight = $('#wrap').height();if(defHeight >= slideHeight) {$('#wrap').css('height', slideHeight + 'px');$('#read-more').append('<a href="#">更多</a>');$('#read-more a').click(function() {var curHeight = $('#wrap').height();if(curHeight == slideHeight) {$('#wrap').animate({height: defHeight}, "normal");$('#read-more a').html('折叠');} else {$('#wrap').animate({height: slideHeight}, "normal");$('#read-more a').html('更多');}return false;});}});

3.css代码

#container {margin: 0 auto;width: 600px;border: 1px solid #3bb2d0;}#wrap {position: relative;padding: 10px;overflow: hidden;}#read-more {padding: 5px;background: #fff;color: #333;}#read-more a {padding-right: 22px;no-repeat 100% 50%;font-weight: bold;text-decoration: none;}#read-more a: hover {color: #000;}

亲测可行

github地址 https://github.com/kacha886/zhedie

0 0