如何制作仅在面板内容内显示滚动条的可折叠手风琴式菜单？

2024-03-06 13:43:15

可折叠手风琴式菜单的伸缩动画

概述

手风琴式菜单是一种广泛使用的导航元素，当面板展开时，它会显示内容，而当面板折叠时，内容会被隐藏。在某些情况下，我们希望即使面板内容溢出，滚动条也仅出现在面板内容区域内，而不是整个手风琴容器内。本文将介绍如何使用 HTML/CSS/JS 来实现这种可折叠手风琴式菜单的伸缩动画。

问题

如果将滚动条放置在手风琴容器中，当面板内容溢出时，手风琴的整体布局可能会变形，影响用户体验。因此，我们需要一种方法来控制滚动条仅出现在面板内容区域内。

解决方案

实现这一目标的关键在于使用 CSS 过渡或动画来管理面板内容的显示。以下是实现它的步骤：

1. 使用 CSS 过渡或动画

使用 transition 或 animation 属性来创建面板展开或折叠时的动画效果。

2. 设置面板内容的最大高度

设置面板内容 div 的 max-height 属性，以控制其可以扩展到的最大高度。

3. 在展开面板时更新最大高度

当面板展开时，使用 JavaScript 来更新 max-height 属性，以允许面板内容展开。

4. 在折叠面板时重置最大高度

当面板折叠时，重置 max-height 属性，以隐藏面板内容。

实现

为了更深入地理解这一解决方案，这里提供一个示例代码：

<div class="accordion">
  <div class="panel">
    <div class="panel-header">
      <span>Panel 1</span>
      <button onclick="expandPanel(this.parentElement)">展开</button>
    </div>
    <div class="panel-content">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="panel">
    <div class="panel-header">
      <span>Panel 2</span>
      <button onclick="collapsePanel(this.parentElement)">折叠</button>
    </div>
    <div class="panel-content">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</div>

.accordion {
  display: flex;
  flex-direction: column;
}

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

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}

.panel-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.panel-content p {
  margin: 0;
}

function expandPanel(panel) {
  panel.querySelector('.panel-content').style.maxHeight = '100%';
}

function collapsePanel(panel) {
  panel.querySelector('.panel-content').style.maxHeight = '0';
}