使用CSS单击+图标后自动折叠Accordian Style选项卡

Accordian Style选项卡是一种常见的用户界面元素，通过点击一个图标或按钮来切换显示或隐藏相关内容。在这个问答中，我将为您介绍如何使用CSS来实现这种效果。

首先，我们需要一个HTML结构来创建Accordian Style选项卡。以下是一个基本的示例：

<div class="accordion">
  <div class="accordion-header">
    <span class="icon">+</span>
    <h2>选项卡标题</h2>
  </div>
  <div class="accordion-content">
    <p>选项卡内容</p>
  </div>
</div>

在这个示例中，.accordion是整个选项卡的容器，.accordion-header是标题栏的容器，.accordion-content是内容的容器。我们将使用CSS来设置它们的样式和行为。

接下来，我们使用CSS来定义样式和行为。以下是一个基本的示例：

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

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

.accordion.active .accordion-content {
  display: block;
}

.accordion.active .icon {
  transform: rotate(45deg);
}

.icon {
  transition: transform 0.3s ease;
  float: right;
}

.icon::after {
  content: '\002B';
}

.accordion.active .icon::after {
  content: '\2212';
}

在这个示例中，我们定义了选项卡的标题栏和内容的样式。.accordion-header使用cursor: pointer来将鼠标光标设置为手型，并设置了背景颜色和内边距。.accordion-content使用display: none来隐藏内容，并设置了内边距。

我们还使用了.active类来表示选项卡当前处于展开状态。当.active类被添加到.accordion上时，.accordion-content的display属性将被设置为block，从而展开内容。同时，使用CSS3的transform属性来旋转标题栏右侧的图标（.icon）。

最后，我们在.icon的伪元素::after中添加了content属性来显示折叠图标。默认情况下，我们使用加号(\002B)作为图标，当选项卡处于展开状态时，我们使用减号(\2212)作为图标。

在JavaScript方面，您可以使用以下代码来实现点击切换展开和折叠的功能：

const accordions = document.querySelectorAll('.accordion');

accordions.forEach(accordion => {
  const header = accordion.querySelector('.accordion-header');

  header.addEventListener('click', () => {
    accordion.classList.toggle('active');
  });
});

这段代码将为每个.accordion元素的标题栏添加了一个点击事件监听器。当标题栏被点击时，它将切换.active类的状态，从而触发CSS中的样式变化。

总结一下，通过以上的HTML、CSS和JavaScript代码，我们可以实现使用CSS单击+图标后自动折叠Accordian Style选项卡的效果。这种选项卡常用于展示隐藏内容，适用于FAQ页面、产品特点展示等场景。

如果您希望在腾讯云上使用相关产品来支持您的云计算需求，我推荐使用腾讯云的云服务器（CVM）来搭建和运行您的网站、应用程序等。您可以访问以下链接获取更多关于腾讯云云服务器的信息和产品介绍：

腾讯云云服务器（CVM）

希望这个回答能够帮助到您，如果您有任何其他问题，请随时提问。