js 超出高度显示更多
时间: 2023-05-30 10:05:17 浏览: 83
可以使用CSS样式中的`overflow`属性来实现超出高度显示更多的效果。具体做法是将需要显示的内容放在一个`div`容器中,设置该容器的高度和`overflow`属性,当内容超出容器高度时,就会出现滚动条或隐藏部分内容。可以通过添加一个“查看更多”按钮,通过点击按钮来显示全部内容。
以下是一个示例代码:
HTML代码:
```
<div class="content">
<p>这是一段很长很长的内容,如果超出了容器的高度就会出现滚动条或隐藏部分内容。</p>
<p>这是第二段内容,同样很长很长的内容,如果超出了容器的高度也会出现滚动条或隐藏部分内容。</p>
<button class="btn-more">查看更多</button>
</div>
```
CSS代码:
```
.content {
height: 200px; /* 容器的高度 */
overflow: hidden; /* 超出部分隐藏 */
}
.btn-more {
display: none; /* 初始状态下隐藏“查看更多”按钮 */
}
.content.show-more {
height: auto; /* 显示全部内容 */
overflow: visible;
}
.content.show-more .btn-more {
display: none; /* 显示全部内容时隐藏“查看更多”按钮 */
}
```
JS代码:
```
var content = document.querySelector('.content');
var btnMore = document.querySelector('.btn-more');
btnMore.addEventListener('click', function() {
content.classList.add('show-more');
});
```
以上代码将“查看更多”按钮添加到容器中,然后通过JS代码监听按钮的点击事件。当按钮被点击时,将容器的类名修改为`show-more`,同时修改容器的高度和`overflow`属性,这样就可以显示全部内容了。同时,还需要修改按钮的样式,达到隐藏的效果。
阅读全文