网页展开收起,jquery,js,代码
时间: 2024-03-11 20:48:20 浏览: 21
好的,下面是一个基于jQuery的展开收起代码的示例:
HTML部分:
```html
<p id="text">这是一段需要展开收起的文本,当长度超过50个字符时会自动隐藏。</p>
<button id="btn">展开/收起</button>
```
CSS部分:
```css
#text {
height: 50px; /* 设置文本框的高度 */
overflow: hidden; /* 隐藏超出部分 */
}
```
jQuery部分:
```javascript
$(document).ready(function(){
var showChar = 50; // 显示的字符数
var ellipsestext = "...";
var moretext = "展开";
var lesstext = "收起";
var content = $("#text").text();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$("#text").html(html);
}
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
```
这段代码实现的功能是:当文本框中的内容长度超过50个字符时,将超出部分隐藏,同时在文本末尾添加一个“展开”链接。当用户点击“展开”链接时,将超出部分显示出来,并将“展开”链接修改为“收起”,再次点击时将超出部分隐藏并将链接修改为“展开”。