场景：手风琴图标没有状态区分
Bricks 提供了两个手风琴元素：
-
Accordion（旧版）：可以在主题样式中分别设置「默认状态图标」和「展开状态图标」，全站生效。
-
Accordion (Nestable)（新版，最常用）：不支持分别设置两种状态的图标。开箱即用时，图标在展开和收起状态下长得一模一样——默认的箭头图标始终指向同一个方向，用户看不出当前是开还是合。Bricks 官方至少该加一行 CSS 让图标在展开时转个向，可惜没有。
不过我们可以自己补上。核心思路：用 CSS 把图标默认旋转 90 度（箭头朝下），当条目处于展开态（.brx-open）时再旋转 -90 度（箭头朝上），并加过渡动画让旋转平滑。这是 BricksLabs 免费教程给出的完整方案。
完整 CSS
在 Bricks 编辑器里进入 Settings（齿轮图标）→ 自定义 CSS，或者放到子主题样式表，粘贴以下代码（原样保留）：
.accordion-title-wrapper .brxe-icon {
transform: rotate(90deg);
transition: 200ms transform ease-in-out;
}
.brx-open .accordion-title-wrapper .brxe-icon {
transform: rotate(-90deg);
}效果：默认箭头朝下（rotate 90deg），展开后箭头朝上（rotate -90deg），200ms 缓动过渡。
原理说明
-
DOM 结构：Accordion (Nestable) 的每个条目标题由
.accordion-title-wrapper包裹，内部图标是.brxe-icon。CSS 选择器.accordion-title-wrapper .brxe-icon精确命中所有条目的标题图标，不误伤内容区的其他图标。 -
.brx-open是激活态标记：Bricks 所有可展开组件（手风琴、Tabs、Offcanvas）在展开时都会给根元素加.brx-open类。.brx-open .accordion-title-wrapper .brxe-icon表示「展开条目的标题图标」，两条规则一起构成状态切换。 -
transform 旋转为什么可行：图标本身是 SVG（或字体图标），旋转不改变布局占位，视觉上就是箭头指向变化；配合
transition: 200ms transform ease-in-out，旋转过程平滑不突兀。 -
想换更复杂的图标方案（比如默认加号、展开变减号），就得自己写规则或用 BricksExtras 插件的 Pro Accordion 元素——后者支持分别设置两种状态的图标，灵活性更高。
扩展：顺带做点状态样式
同一个 .brx-open 选择器还能顺手做更多状态反馈，比如展开条目的标题变色、加粗：
.brx-open .accordion-title-wrapper {
color: var(--bricks-color-accent);
font-weight: 600;
}这样「当前展开的是哪一项」在视觉上一目了然，FAQ 类页面尤其好用。注意 --bricks-color-accent 是 Bricks 的全局色板变量，换成你自己的主题色变量即可。
相关阅读：
常见误区与扩展
- 老版 Accordion 和新版别混：旧版 Accordion 能在主题样式里分别设置两种状态图标；Accordion (Nestable) 才需要本文的 CSS。先确认你用的是哪个元素。
- 选择器别写太宽：
.accordion-title-wrapper .brxe-icon精确命中标题图标；如果手风琴内容区里也有图标，写全上下文才不误伤。 - 想换图标样式（加号变减号）：要么自己写规则，要么用 BricksExtras 的 Pro Accordion——后者支持分别设置展开/收起两种状态的图标。
.brx-open是万能状态钩子：Tabs、Offcanvas、手风琴展开时都会加这个类，任何「展开时要做点什么」的需求都能靠它写 CSS。
小结
两行 CSS 解决了 Accordion (Nestable) 的状态反馈缺失问题：默认朝下、展开朝上，还带平滑过渡。这个思路再次印证了 Bricks 的玩法——.brx-open 是驱动一切展开组件状态的关键类，任何「展开时要做点什么」的需求，几乎都能靠给它写 CSS 规则实现，图标旋转、标题变色、背景高亮都是同一套选择器的应用。
常见问题（FAQ）
Q：Accordion (Nestable) 不能分别设两种图标？ A：对，新版手风琴不支持分别设置展开/收起图标，需要像本文这样用 CSS 旋转或自己写规则。
Q：.brx-open 是什么？
A：Bricks 所有可展开组件（手风琴、Tabs、Offcanvas）展开时给根元素加的激活态类，是写状态 CSS 的关键钩子。
Q：旋转会改变布局吗？ A：不会，transform 旋转不改变布局占位，视觉上就是箭头指向变化。
Q：想实现加号变减号？ A：自己写规则，或用 BricksExtras 的 Pro Accordion 元素——它支持分别设置两种状态的图标。
Q：CSS 放哪里？ A：Bricks 编辑器 Settings → 自定义 CSS，或子主题样式表，任选其一。
延伸阅读
- 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
- 相关阅读：Bricks Setup Guide
延伸阅读
Bricks Masonry 手风琴：Accordion（Nestable）里的瀑布流查询循环
实战技巧：Bricks Masonry 手风琴：Accordion（Nestable）里的瀑布流查询循环——query loop 实操步骤+踩坑提醒，适合外贸独立站与 WordPress 开发者。
tipsBricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）
实战技巧：Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）——css 实操步骤+踩坑提醒，适合外贸独立站与 WordPress 开发者。
tips手风琴展开项自动滚动到可视区（解决内容跳动问题）
实战技巧：手风琴展开项自动滚动到可视区（解决内容跳动问题）——accordion 实操步骤+踩坑提醒，适合外贸独立站与 WordPress 开发者。
tipsBricks 吸顶元素：用 position: sticky 让任意元素滚动吸顶
实战技巧：Bricks 吸顶元素：用 position: sticky 让任意元素滚动吸顶——css 实操步骤+踩坑提醒，适合外贸独立站与 WordPress 开发者。