手风琴show/hide切换功能失效 故障原因排查

预览切换按钮功能异常 #

当前实现仅单向给预览容器设置display: none，缺失完整状态切换逻辑：

• 未做显隐状态判断：点击按钮时需先判断预览容器当前状态，隐藏状态下要将容器display属性恢复为默认显示值（和容器初始display值匹配，如block/grid/flex），同时同步切换按钮文案在「show preview」/「hide preview」之间切换。
• 优先用类控制样式替代直接修改内联style：单独定义.preview-hidden { display: none; }类，点击时切换该类的增删即可，避免内联样式优先级过高导致后续样式冲突。

手风琴组件展开/收起失效 #

你采用的相邻兄弟选择器方案对DOM结构、选择器写法、类挂载位置要求严格，按以下优先级排查：

• 校验DOM结构：相邻兄弟选择器.panel-title.panel-show + .panel-body生效的核心前提是，.panel-body必须是.panel-title的直接相邻同级节点，两个元素之间不能存在任何其他元素节点（包括空标签、注释节点），只要有间隔节点选择器会直接失效。
• 校验CSS选择器写法：不要把相邻选择器错写成后代选择器，参考正确写法：

/* 默认面板内容收起 */
.panel-body {
  display: none;
}
/* 匹配激活状态标题相邻的内容区，设置为显示 */
.panel-title.panel-show + .panel-body {
  display: block;
}

• 校验JS交互逻辑：确认点击面板标题时，.panel-show类是直接挂载在被点击的.panel-title元素本身，不要错挂在父元素或内容区元素上，同时排查类名拼写错误（如大小写错误、字符漏写）。如果需要实现单面板互斥展开效果，给当前标题加类时，要同步移除其他所有.panel-title上的.panel-show类。
• 校验样式优先级：打开浏览器开发者工具选中.panel-body元素，查看你写的展开样式是否被更高优先级的规则覆盖（比如元素上的内联display样式、其他带更高权重的选择器规则），如果被覆盖可适当提升选择器权重，或移除冲突样式。

内容的提问来源于stack exchange，提问作者Dušan Nemam