A content area which can be collapsed and expanded at right
时间: 2024-03-02 19:50:48 浏览: 21
您可以使用 HTML、CSS 和 JavaScript 来创建一个可折叠的内容区域,并将其放置在右侧。下面是一个简单的示例:
HTML 代码:
```
<div class="content">
<div class="header">
<h2>可折叠的内容区域</h2>
<button class="toggle-btn">展开/折叠</button>
</div>
<div class="body">
<p>这是内容区域的内容。</p>
</div>
</div>
```
CSS 代码:
```
.content {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 300px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f1f1f1;
cursor: pointer;
}
.body {
padding: 10px;
}
.collapsed .body {
display: none;
}
```
JavaScript 代码:
```
const content = document.querySelector('.content');
const toggleBtn = document.querySelector('.toggle-btn');
function toggleContent() {
content.classList.toggle('collapsed');
}
toggleBtn.addEventListener('click', toggleContent);
```
以上代码将创建一个固定在右侧的内容区域,当点击 "展开/折叠" 按钮时,它会切换折叠和展开状态。您可以根据需要调整样式和 JavaScript 代码,以适应您的具体场景。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)