Zurb Foundation 6.7.4 Accordion点击后瞬开即闭无法正常展开

核心错误是组件属性写错：

• 手风琴内容面板的自定义属性误用了Tabs组件的data-tab-content，Accordion组件识别不到正确的内容容器，会导致事件绑定逻辑错乱，点击标题时会连续触发展开、关闭两个动作，最终表现为展开瞬间就自动收回。
• 正确的内容容器属性为data-accordion-content，替换即可解决90%以上的同类秒关问题。

其他排查项 #

1. 确认Foundation全局初始化代码已执行，需在DOM加载完成后调用初始化方法，否则所有组件交互都会异常：

$(function() {
  $(document).foundation();
});

2. 若修正属性后仍存在偶发关闭，可将标题a标签的href="#"替换为href="javascript:void(0)"，避免空锚点触发页面滚动重绘，干扰组件状态判定。

修正后完整代码 #

<div class="grid-x">
  <div class="medium-12 cell">
    <ul class="no-bullet accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
      <li class="accordion-item" data-accordion-item>
        <a href="javascript:void(0)" class="accordion-title">
          My Title
        </a>
        <div class="accordion-content" data-accordion-content>
          My content
        </div>
      </li>
    </ul>
  </div>
</div>

替换代码后刷新页面即可，手风琴点击后会正常保持展开状态，配置的多开、全部关闭规则也会正常生效。

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