如何在回收器视图上制作折叠和粘滞的视图？

<div class="recycler-view">
  <div class="item">
    <div class="header">Header 1</div>
    <div class="content">Content 1</div>
  </div>
  <div class="item">
    <div class="header">Header 2</div>
    <div class="content">Content 2</div>
  </div>
  <div class="item">
    <div class="header">Header 3</div>
    <div class="content">Content 3</div>
  </div>
</div>

.recycler-view {
  width: 100%;
}

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

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

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

// 获取所有的header元素
var headers = document.getElementsByClassName('header');

// 遍历header元素，为每个header元素添加点击事件
for (var i = 0; i < headers.length; i++) {
  headers[i].addEventListener('click', function() {
    // 切换content元素的显示状态
    var content = this.nextElementSibling;
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
}