<!doctype html> <html> <head> <meta charset="utf-8"> <title>阅读更多插件（readmore）使用示例</title> </head> <body> <div id="article"> <p>第1段文字……</p> <p>第2段文字……</p> <p>第3段文字……</p> <p>第4段文字……</p> <p>第5段文字……</p> <p>…………</p> <p>第N段文字……</p> </div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.readmore.min.js"></script> <script type="text/javascript"> $('#article').readmore({ speed: 500, // 展开/收起速度，单位：毫秒 maxHeight: 450, // 高度（注意：该参数必须为正整数，否则可能无法展开），单位：px，缺省值为200 moreLink: '<a href="javascript:;">点击俺展开</a>', // 展开按钮 lessLink: '<a href="javascript:;">点击俺收起</a>', // 收起按钮，若要实现展开后不能收起可设为空字符串 startOpen: false, // 初始状态，可选值：false=收起|true=展开 expandedClass: 'readmore-js-expanded', // 展开时给元素增加的样式 collapsedClass: 'readmore-js-collapsed', // 收起时给元素增加的样式 beforeToggle: function (trigger, element, expanded) { // 展开/收起前回调 console.log('触发beforeToggle()回调'); }, afterToggle: function (trigger, element, expanded) { // 展开/收起后回调 console.log('触发afterToggle()回调'); }, }); </script> </body> </html>
Copyright © 2024 码农人生. All Rights Reserved