[分享]css做折叠面板

CSS折叠面板在网页设计中是非常常见的一种交互式组件，可以让用户触发事件展开或折叠相关信息。现在，让我们一起来学习如何使用CSS制作一个简单的折叠面板吧！.html代码 标题1 展开/闭合内容1 ...

CSS折叠面板在网页设计中是非常常见的一种交互式组件，可以让用户触发事件展开或折叠相关信息。现在，让我们一起来学习如何使用CSS制作一个简单的折叠面板吧！

.html代码

<div class="panel">
  <div class="panel-header">标题1</div>
  <div class="panel-content">展开/闭合内容1</div>
</div>
<div class="panel">
  <div class="panel-header">标题2</div>
  <div class="panel-content">展开/闭合内容2</div>
</div> 

我们首先需要在HTML中创建一个包含两个面板的面板组。每个面板包含一个标题和一个内容块。具体的HTML代码如上所示。

.css代码

.panel {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.panel-header {
  background-color: #efefef;
  padding: 5px;
  cursor: pointer;
}
.panel-content {
  display:none;
  padding: 10px;
} 

接下来，我们需要通过CSS样式表来为折叠面板定义外观和行为。我们为.class为panel的元素设置了边框和下边距，使其在视觉上更加清晰。我们为.panel-header设置了灰色背景和光标样式，以表明它是个可点击的标题。

我们还为.panel-content元素设置了display:none，以将其初始状态隐藏。后续使用JavaScript实现折叠面板的展开和折叠操作。

JavaScript代码

var headers = document.querySelectorAll('.panel .panel-header');
for (var i = 0; i < headers.length; i++) {
  headers[i].addEventListener('click', togglePanel);
}

function togglePanel() {
  var content = this.nextElementSibling;
  if (content.style.display == 'block') {
    content.style.display = 'none';
  } else {
    content.style.display = 'block';
  }
} 

最后，我们使用JavaScript为折叠面板添加行为。我们使用document.querySelectorAll()方法选择所有具有.panel-header class的元素，并使用一个循环遍历每个元素。我们给每个元素添加一个点击事件监听器，它会调用togglePanel()函数。

在togglePanel()函数中，我们使用this. nextElementSibling()方法找到与当前点击的标题相关的面板内容项。然后我们根据当前显示状态将其显示或隐藏。

至此，我们已经完成了CSS折叠面板的构建。学习本教程后你可以自己进一步探索，进而实现其他更加复杂的折叠面板交互！