html折叠面板
时间: 2023-07-05 10:13:12 浏览: 51
HTML折叠面板是一种可以展开或折叠内容的交互式组件。用户可以单击标题栏或按钮,展开或折叠面板中的内容。以下是一个基本的HTML折叠面板的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>折叠面板示例</title>
<style>
.panel {
border: 1px solid #ddd;
margin-bottom: 10px;
}
.panel-heading {
background-color: #f5f5f5;
padding: 10px;
cursor: pointer;
}
.panel-body {
padding: 10px;
display: none;
}
.panel-body.show {
display: block;
}
</style>
</head>
<body>
<div class="panel">
<div class="panel-heading" onclick="togglePanel(this)">面板1</div>
<div class="panel-body">这是面板1的内容。</div>
</div>
<div class="panel">
<div class="panel-heading" onclick="togglePanel(this)">面板2</div>
<div class="panel-body">这是面板2的内容。</div>
</div>
<script>
function togglePanel(panel) {
var body = panel.nextElementSibling;
body.classList.toggle('show');
}
</script>
</body>
</html>
```
在这个示例中,我们使用了HTML、CSS和JavaScript来创建一个简单的折叠面板。每个面板由一个标题栏和一个内容区域组成。当用户单击标题栏时,我们使用JavaScript来切换内容区域的可见性。如果内容区域是可见的,我们将其隐藏,否则,我们将其显示出来。