用js编写一大段文字展开收起
时间: 2024-02-06 22:10:01 浏览: 29
可以使用以下代码实现展开收起的功能:
HTML部分:
```html
<div class="text-container">
<p class="text">这是一段很长很长的文字,需要进行展开和收起操作。</p>
<p class="more">展开</p>
</div>
```
CSS部分:
```css
.text-container {
position: relative;
height: 100px;
overflow: hidden;
}
.text-container .text {
margin: 0;
padding: 0;
}
.text-container .more {
position: absolute;
bottom: 0;
right: 0;
background-color: #fff;
color: #007bff;
cursor: pointer;
}
```
JavaScript部分:
```javascript
const textContainer = document.querySelector('.text-container');
const text = textContainer.querySelector('.text');
const more = textContainer.querySelector('.more');
more.addEventListener('click', function() {
if (textContainer.classList.contains('expanded')) {
// 收起
textContainer.classList.remove('expanded');
more.innerText = '展开';
} else {
// 展开
textContainer.classList.add('expanded');
more.innerText = '收起';
}
});
```
以上代码实现了一个最基本的展开收起功能,点击“展开”按钮时,文字会展开到全部显示;点击“收起”按钮时,文字会再次收起到指定高度。如果需要更加复杂的展开收起效果,可以根据实际需求进行修改。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)