css accordion加减图标转换不正确

CSS Accordion（手风琴）是一种常见的网页布局方式，通过点击标题来展开或折叠内容区域。加减图标转换不正确通常是由于CSS选择器或JavaScript逻辑的问题导致的。下面我将详细解释这个问题，并提供解决方案。

基础概念

Accordion（手风琴）：一种交互式组件，允许用户通过点击标题来展开或折叠内容区域。
加减图标：通常用于表示内容的展开和折叠状态。

类型

纯CSS实现：通过CSS伪类和选择器实现展开和折叠效果。
JavaScript实现：通过JavaScript动态改变元素的显示状态。

应用场景

导航菜单：在侧边栏或顶部导航中使用。
FAQ页面：常见问题解答页面。
设置面板：应用程序的设置选项卡。

常见问题及原因

图标切换不正确：可能是由于CSS选择器没有正确匹配到展开和折叠状态的元素。
JavaScript逻辑错误：可能是由于JavaScript代码没有正确处理展开和折叠状态的切换。

解决方案

纯CSS实现

假设我们有以下HTML结构：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">标题</div>
    <div class="accordion-content">内容</div>
  </div>
</div>

我们可以使用CSS伪类:checked和相邻兄弟选择器+来实现图标切换：

.accordion-content {
  display: none;
}

.accordion-header::before {
  content: '+';
}

.accordion-header:checked + .accordion-content {
  display: block;
}

.accordion-header:checked::before {
  content: '-';
}

HTML需要稍作修改，添加一个隐藏的checkbox：

<div class="accordion">
  <input type="checkbox" id="accordion1" class="accordion-header">
  <label for="accordion1">标题</label>
  <div class="accordion-content">内容</div>
</div>

JavaScript实现

如果使用JavaScript，可以监听点击事件并动态改变图标和内容的显示状态：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">标题 <span class="icon">+</span></div>
    <div class="accordion-content">内容</div>
  </div>
</div>

JavaScript代码如下：

document.querySelectorAll('.accordion-header').forEach(header => {
  header.addEventListener('click', function() {
    const content = this.nextElementSibling;
    const icon = this.querySelector('.icon');
    if (content.style.display === 'block') {
      content.style.display = 'none';
      icon.textContent = '+';
    } else {
      content.style.display = 'block';
      icon.textContent = '-';
    }
  });
});