用纯CSS实现手风琴效果的示例代码

请注意以下内容：

纯CSS实现手风琴效果的攻略

手风琴效果可以看做是一个菜单或导航栏中的一种常见效果，它呈现的是当前打开条目的详细内容，而其他项则收缩，常常用于展示较为复杂的内容。

使用纯CSS实现手风琴效果一般需要结合以下几个步骤：

1. HTML代码结构

实现手风琴效果需要菜单项和内容项结合起来，HTML的基本结构如下：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Menu Item 1</div>
    <div class="accordion-content">Content 1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Menu Item 2</div>
    <div class="accordion-content">Content 2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Menu Item 3</div>
    <div class="accordion-content">Content 3</div>
  </div>
</div>

其中accordion类是最外层的容器，accordion-item是每一个菜单项和对应的内容，accordion-header是菜单项的标题，accordion-content是对应菜单项的内容。

2. CSS样式编写

为了让菜单项和内容项能够实现收缩和展开的效果，需要通过CSS样式控制：

/* 定义鼠标悬停时的背景色 */
.accordion-header:hover{
  background-color: #eee;
}

/* 定义菜单项标题的样式 */
.accordion-header{
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  padding:10px;
  font-weight:bold;
  cursor:pointer;
}

/* 定义展开状态的样式 */
.accordion-item.active .accordion-content{ 
  max-height: 300px;
  transition: max-height .3s ease-in-out;
  overflow: auto;
}

/* 定义折叠状态的样式 */
.accordion-content{
  max-height: 0px;
  transition: max-height .3s ease-in-out;
  overflow: hidden;
}

其中，注意以下样式：

• .accordion-header:hover：该样式定义了鼠标悬停时的背景色；
• .accordion-header：该样式定义了菜单项标题的通用样式，可以根据需求进行修改；
• .accordion-item.active .accordion-content：该样式定义了菜单项展开时内容展示的样式；
• .accordion-content：该样式定义了菜单项折叠时内容展示的样式，初始高度为0，用于实现菜单项的收缩和展开。

3. JS交互

如需添加JS交互控制，则需要编写一些JS代码，实现控制菜单项折叠和展开的功能，以下是一个示例代码：

const accordionItems = document.querySelectorAll(".accordion-item");

accordionItems.forEach((item) => {
  const header = item.querySelector(".accordion-header");

  header.addEventListener("click", (evt) => {
    evt.stopPropagation();
    item.classList.toggle("active");
  });

  item.addEventListener("click", () => {
    item.classList.toggle("active");
  });
});

以上代码使用了ES6语法，通过querySelectorAll方法找到所有菜单项，用forEach遍历每个菜单项，将菜单项的事件添加到对应的标签和父标签上，触发时添加或移除active类名，实现菜单项的展开和收缩。

示例说明

以下是两个使用纯CSS实现的手风琴效果示例。

示例1：百度搜索的手风琴效果

可以参考这个链接：https://www.baidu.com/

该效果是在搜索下拉框中实现的手风琴效果，展开的搜索项显示详细内容，其他搜索项则收缩。

示例2：codepen网站的手风琴效果

可以参考这个链接：https://codepen.io/

该效果是在codepen网站的导航栏中实现的手风琴效果，展开的导航栏项显示详细内容，其他导航栏项则收缩。

总的来说，CSS实现手风琴效果相对比较简单，只需要掌握好HTML和CSS的结构和样式控制，即可实现灵活多变的效果。