html折叠面板
时间: 2023-07-01 17:17:55 浏览: 47
HTML折叠面板是一种常用的交互式组件,通常用于显示可折叠的内容区域,用户可以通过点击标题栏的按钮来展开或折叠内容。以下是一个基本的HTML折叠面板的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>折叠面板示例</title>
<style>
.panel {
margin-bottom: 10px;
border: 1px solid #ddd;
}
.panel-heading {
padding: 10px;
background-color: #f5f5f5;
cursor: pointer;
}
.panel-body {
padding: 10px;
display: none;
}
.panel-body.show {
display: block;
}
</style>
</head>
<body>
<div class="panel">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
<div class="panel">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
<!-- 可以添加更多的面板 -->
<script>
var panels = document.querySelectorAll('.panel');
for(var i = 0; i < panels.length; i++) {
panels[i].querySelector('.panel-heading').addEventListener('click', function() {
this.nextElementSibling.classList.toggle('show');
});
}
</script>
</body>
</html>
```
上述代码使用CSS样式来定义折叠面板的样式,通过JavaScript代码来实现面板展开和折叠的交互。用户可以根据需要添加更多的面板,每个面板包括一个标题和一个内容区域。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)