CSS 手风琴三角形

CSS 手风琴三角形是一个常见的前端效果，它可以让用户点击某个元素时，展开或者关闭对应的内容。本文将介绍如何使用 CSS 来实现一个手风琴三角形效果。

HTML 结构

首先，我们需要在 HTML 中创建一个基本的结构，包含一个父元素和若干个子元素。父元素用来容纳所有的子元素，并且拥有一个 active 类名，用来标明当前被选中的子元素。

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

CSS 样式

我们需要为父元素和子元素编写一些 CSS 样式。首先，我们为父元素设置一些基本的样式：

.accordion {
  border-bottom: 1px solid #ddd; // 边框
}

.accordion .accordion-item {
  margin-bottom: 1px; // 子元素间距
}

.accordion .accordion-item:last-child {
  margin-bottom: 0; // 最后一个子元素不需要间距
}

然后，我们为子元素设置一些基本的样式:

.accordion .accordion-item {
  overflow: hidden; // 隐藏子元素中不需要显示的部分
}

.accordion .accordion-header {
  padding: 10px; // 头部内边距
  background-color: #f1f1f1; // 背景颜色
  cursor: pointer; // 鼠标指针
}

.accordion .accordion-header:hover {
  background-color: #ddd; // 鼠标悬停时背景颜色
}

.accordion .accordion-header::after {
  content: '▲'; // 三角形
  float: right; // 向右浮动
  margin-top: 6px; // 上下边距
  margin-right: 10px; // 左右边距
  font-size: 12px; // 字体大小
  font-weight: bold; // 字体粗细
}

.accordion .accordion-header.active::after {
  transform: rotate(180deg); // 当前选中标记向下
}

下面是完整的 CSS 样式：

.accordion {
  border-bottom: 1px solid #ddd;
}

.accordion .accordion-item {
  margin-bottom: 1px;
  overflow: hidden;
}

.accordion .accordion-item:last-child {
  margin-bottom: 0;
}

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

.accordion .accordion-header:hover {
  background-color: #ddd;
}

.accordion .accordion-header::after {
  content: '▲';
  float: right;
  margin-top: 6px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: bold;
}

.accordion .accordion-header.active::after {
  transform: rotate(180deg);
}

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

JavaScript 代码

最后，我们需要编写一些 JavaScript 代码，用来监听父元素和子元素的点击事件。当用户点击某个子元素时，我们需要将其他所有子元素的 active 类名移除，并将当前子元素的 active 类名添加上去。

const accordion = document.querySelector('.accordion');

accordion.addEventListener('click', function (event) {
  if (event.target.classList.contains('accordion-header')) {
    const item = event.target.parentNode;
    const items = accordion.querySelectorAll('.accordion-item');
    for (let i = 0; i < items.length; i++) {
      if (items[i] !== item) {
        items[i].classList.remove('active');
      }
    }
    item.classList.toggle('active');
  }
});

效果演示

现在，我们已经完成了手风琴三角形效果的实现。可以查看效果：

https://codepen.io/pen/?template=qBqXEgM

总结

CSS 手风琴三角形是前端常见的效果之一，本文介绍了如何使用 CSS 和 JavaScript 来实现该效果。需要注意的是，我们需要为父元素和子元素分别设置一些基本的样式，同时需要编写 JavaScript 代码来监听父元素和子元素的点击事件。