Liquid短代码渲染的Accordion手风琴折叠展开不一致问题排查求助

问题排查点 #

• 无效HTML结构：<ul> 的直接子元素只能是 <li>，你当前代码直接在 <ul> 内嵌套 <button> 和 <div>，浏览器会自动补全缺失的 <li> 标签，打乱原有DOM层级，导致JS中 nextElementSibling 无法找到对应的内容块。另外代码中两个 <p> 标签都没有闭合，也会导致浏览器自动补全标签，破坏预期结构。
• 可点击区域重叠：CSS 中 .collapsible 设置了 margin: -50px，过大的负边距会导致相邻的按钮元素区域重叠，上层按钮会遮挡下层按钮的点击区域，出现点击隔项才生效的表象。
• 事件绑定不兼容动态渲染：原有JS只在页面加载时执行一次绑定，如果Liquid短代码是在JS执行后才动态渲染内容，会导致部分元素没有绑定点击事件。

解决方法 #

1. 修复HTML结构 #

将手风琴项放在合法的 <li> 节点内，闭合所有未闭合的标签，保证DOM结构符合预期：

<ul class="accordion-container">
  <li>
    <button type="button" class="collapsible">{{Args.state}}</button>
    <div class="content">
      <p>
        <b>Oil and Natural Gas Representatives:</b><br>
        {{Args.name}}<br>
        Phone: {{Args.phone}}<br>
        Email: <a class="link-primary" href='mailto:{{Args.email}}'>{{Args.email}}</a><br>
        Web Site: <a class="link-primary" href='{{Args.website}}'>{{Args.website}}</a><br>
      </p>
      <p>
        <b>Regulations:</b><br>
        <a class="link-info" href="{{Args.regulations}}" target="_blank">View {{Args.state}} Regulations</a>
      </p>
    </div>
  </li>
</ul>

2. 修复CSS样式 #

删除导致重叠的负边距，按需调整间距：

<style>
.collapsible {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 25px;
    /* 移除margin: -50px，避免点击区域重叠 */
}

.active, .collapsible:hover {
    background-color: #ccc;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}
</style>

3. 优化JS事件绑定 #

改用事件委托的方式绑定事件，兼容动态渲染的内容，不需要依赖data-target属性：

<script>
// 绑定到父容器，动态生成的元素也能触发事件
document.querySelector('.accordion-container').addEventListener('click', function(e) {
  if (e.target.classList.contains('collapsible')) {
    e.target.classList.toggle('active');
    var content = e.target.nextElementSibling;
    content.style.display = content.style.display === 'block' ? 'none' : 'block';
  }
});
</script>

内容的提问来源于stack exchange，提问作者Sean Gillespie