如何添加带有向上和向下箭头的面板折叠

要添加带有向上和向下箭头的面板折叠，可以使用HTML、CSS和JavaScript来实现。以下是一种常见的实现方式：

HTML结构：

<div class="panel">
  <div class="panel-header">
    <h3 class="panel-title">面板标题</h3>
    <span class="arrow"></span>
  </div>
  <div class="panel-content">
    <!-- 面板内容 -->
  </div>
</div>

CSS样式：

.panel {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.panel-header {
  background-color: #f5f5f5;
  padding: 10px;
  cursor: pointer;
}

.panel-title {
  margin: 0;
}

.arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.panel-content {
  padding: 10px;
  display: none;
}

JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
  var panelHeaders = document.querySelectorAll('.panel-header');

  panelHeaders.forEach(function(header) {
    header.addEventListener('click', function() {
      var content = this.nextElementSibling;
      var arrow = this.querySelector('.arrow');

      if (content.style.display === 'none') {
        content.style.display = 'block';
        arrow.style.transform = 'rotate(225deg)';
      } else {
        content.style.display = 'none';
        arrow.style.transform = 'rotate(45deg)';
      }
    });
  });
});

这段代码会为每个面板添加点击事件，点击面板标题时，切换面板内容的显示和隐藏，并旋转箭头图标。你可以根据需要自定义样式和动画效果。

推荐的腾讯云相关产品和产品介绍链接地址：