JavaScript实现卷轴展开关闭效果

可以通过添加或移除CSS类名来实现JavaScript实现卷轴展开关闭效果。首先，需要有一个包含卷轴内容的容器元素和一个用于触发展开和关闭的按钮，例如：

<div class="scroll-wrapper">
  <div class="scroll-content">
    <!-- 卷轴内容 -->
  </div>
</div>

<button class="toggle-btn">展开/关闭</button>

然后，通过CSS设置容器元素的高度为0，使卷轴内容默认隐藏，例如：

.scroll-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

接着，需要通过JavaScript来监听按钮的点击事件，并通过添加或移除CSS类名来实现卷轴的展开和关闭，例如：

const toggleBtn = document.querySelector('.toggle-btn');
const scrollWrapper = document.querySelector('.scroll-wrapper');

toggleBtn.addEventListener('click', () => {
  if (scrollWrapper.classList.contains('open')) {
    scrollWrapper.classList.remove('open');
    scrollWrapper.style.height = 0;
  } else {
    scrollWrapper.classList.add('open');
    scrollWrapper.style.height = scrollWrapper.scrollHeight + 'px';
  }
});

在这段代码中，我们通过classList来判断容器元素是否已经展开，如果已经展开则移除open类名并将高度设为0，否则添加open类名并将高度设为容器元素的滚动高度，即scrollHeight。

最后，需要通过CSS设置容器元素的过渡效果，使展开和关闭效果更加平滑，例如：

.scroll-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

这样，就完成了JavaScript实现卷轴展开关闭效果的代码。