/**
* Created by dongdong on 2015/4/28.
*/
(function($){
var defaults = {
height:40, //文本收起后的高度
speed:'normal', //文本收起和展開的速度
down:{"class":"fold-down","text":"展開"}, //展開的樣式
up:{"class":"fold-up","text":"收起"} //收起的樣式
};
$.fn.accordionText = function(options){
options = $.extend(defaults,options);
return this.each(function(){
var c = $(this);
var h = c.height();
console.log(h);
var ph = parseInt(c.css("padding-top").replace("px","")) + parseInt(c.css("padding-bottom").replace("px",""));
$(this).css({overflow:"hidden",height:options.height + ph + "px"});

$("#"+$(this).data('switch')).data('toggle', 'down').on('click', function(){
if ($(this).data('toggle') == 'down') {
$(this).text(options.up.text)
.removeClass(options.down.class)
.addClass(options.up.class);
c.animate({height:h+ph + "px"},options.speed);
$(this).data('toggle', 'up');
} else {
$(this).text(options.down.text)
.removeClass(options.up.class)
.addClass(options.down.class);
c.animate({height:options.height+ph + "px"},options.speed);
$(this).data('toggle', 'down');
}
})
.text(options.down.text)
.addClass(options.down.class);
});
}
})(jQuery); ?

調用(這里使用了bootstrap的圖標樣式)：

$(function(){$(".text").accordionText({down:{"class":"glyphicon glyphicon-chevron-down","text":""},up:{"class":"glyphicon glyphicon-chevron-up","text":""}});});

html:

<style type="text/css">.switch{text-align: center; cursor:pointer;height: 20px; line-height: 20px;}.text{ padding: 3px;}</style> <div><div class="text bg-success" data-switch="btn2">蘇打綠開飛機上來看地方就是領導看見菲利克斯減肥路口交水電費路口就是路口附蘇打綠開飛機上來看地方就是領導看見菲利克斯減肥路口交水電費路口就是路口附蘇打綠開飛機上來看地方就是領導看見菲利克斯減肥路口交水電費路口就是路口附蘇打綠開飛機上來看地方就是領導看見菲利克斯減肥路口交水電費路口就是路口附近是考慮到解放路快睡覺打瘋了快圣誕節路口四季度菲利克斯江東父老可接受的李開復就是的離開飛機失聯都快放假順路快遞減肥索拉卡點擊法律考試大姐夫流口水的減肥兩款手機打發兩款手機費路口睡覺的弗蘭克交水電費路口就是的離開飛機上來看點擊</div><div class="switch"><span id="btn2"></span></div> </div>

?下載

轉載于:https://www.cnblogs.com/xiaodo0/p/4462610.html

總結

以上是生活随笔為你收集整理的jquery文本折叠的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。