帮我写一个展开收起的功能
时间: 2024-05-07 10:23:27 浏览: 17
好的,以下是一个简单的展开收起功能的实现示例(使用jQuery库):
HTML代码:
```html
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod libero sed lorem lobortis, vel ullamcorper dui lacinia. Nullam viverra lectus eu aliquet tristique. Sed semper, magna et consequat volutpat, risus velit ultrices metus, id interdum dolor leo in mauris. Phasellus vel eros vel libero commodo vulputate. Sed maximus bibendum ipsum vitae mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras commodo justo non nunc feugiat porttitor. Fusce varius est et ligula tincidunt, id commodo sapien efficitur. Ut in ex sit amet eros bibendum luctus.</p>
<p>Duis euismod libero sed lorem lobortis, vel ullamcorper dui lacinia. Nullam viverra lectus eu aliquet tristique. Sed semper, magna et consequat volutpat, risus velit ultrices metus, id interdum dolor leo in mauris. Phasellus vel eros vel libero commodo vulputate. Sed maximus bibendum ipsum vitae mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras commodo justo non nunc feugiat porttitor. Fusce varius est et ligula tincidunt, id commodo sapien efficitur. Ut in ex sit amet eros bibendum luctus.</p>
<p>Sed semper, magna et consequat volutpat, risus velit ultrices metus, id interdum dolor leo in mauris. Phasellus vel eros vel libero commodo vulputate. Sed maximus bibendum ipsum vitae mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras commodo justo non nunc feugiat porttitor. Fusce varius est et ligula tincidunt, id commodo sapien efficitur. Ut in ex sit amet eros bibendum luctus.</p>
</div>
```
CSS代码:
```css
.content {
overflow: hidden;
max-height: 200px; /* 设置最大高度 */
}
.show-more {
display: block;
text-align: center;
margin-top: 10px;
font-size: 14px;
color: #007bff;
cursor: pointer;
}
```
JavaScript代码:
```javascript
$(document).ready(function() {
var content = $('.content');
var showMoreBtn = $('<a class="show-more">展开全部</a>');
var maxHeight = 200; // 最大高度
var minHeight = content.height(); // 最小高度
// 如果内容高度小于等于最大高度,就不显示“展开全部”按钮
if (minHeight <= maxHeight) {
showMoreBtn.hide();
}
// 隐藏超过最大高度的部分
content.css('max-height', maxHeight + 'px');
// 点击“展开全部”按钮
showMoreBtn.click(function() {
if (showMoreBtn.text() === '展开全部') {
// 展开全部
content.animate({ 'max-height': minHeight + 'px' });
showMoreBtn.text('收起');
} else {
// 收起
content.animate({ 'max-height': maxHeight + 'px' });
showMoreBtn.text('展开全部');
}
});
// 在内容后面插入“展开全部”按钮
content.after(showMoreBtn);
});
```
这个功能会在内容超过一定高度时,显示一个“展开全部”按钮。点击按钮后,内容会自动展开或收起。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)