响应式展开和收起内容的页面代码
时间: 2024-05-06 21:21:28 浏览: 8
以下是响应式展开和收起内容的页面代码示例:
HTML代码:
```
<div class="content">
<h3>这是一个标题</h3>
<p>这里是内容的一部分,初始状态是收起的。</p>
<p class="more">这里是内容的另一部分,只有在展开后才会显示。</p>
<button class="toggle-button">展开/收起</button>
</div>
```
CSS代码:
```
.content {
max-height: 100px;
overflow: hidden;
}
.more {
display: none;
}
.toggle-button {
margin-top: 10px;
}
```
JavaScript代码:
```
var button = document.querySelector('.toggle-button');
var content = document.querySelector('.content');
var more = document.querySelector('.more');
button.addEventListener('click', function() {
if (content.classList.contains('open')) {
// 如果内容已经展开,则收起
content.classList.remove('open');
button.textContent = '展开';
more.style.display = 'none';
} else {
// 如果内容没有展开,则展开
content.classList.add('open');
button.textContent = '收起';
more.style.display = 'block';
}
});
```
当用户点击按钮时,JavaScript代码将切换内容的展开或收起状态,并根据需要显示或隐藏更多内容。这个代码示例非常简单,您可以根据自己的需要进行修改和扩展。