动态手风琴不能完全工作

Question

所以我在 zendesk 上有一个手风琴，它是动态提取内容的。我有一个问题，每当我按下任何选项卡时，只有手风琴的第一个选项卡被折叠。我认为这是因为数据目标：

我已将其设置为打开一个 #id 我想我需要使其动态化，但我不知道怎么做。有人可以帮忙吗？

这是一段代码：

<div class="accordion-wrapper">
  <ul data-toggle="collapse" data-target="#demo" class="article-list article-list_page">
    {{#each section.articles}}
      <li class="article-list__item">
        <a>{{title}}</a>
        <article id="demo" class="article-body collapse">
         {{body}}  
        </article>
      </li>
    {{/each}}
  </ul>
</div>

Answer 1

你能给 "demo" ID 添加一个迭代器吗？ HTML 将 ID 视为单独的项目（一次只能有一个项目具有给定的 ID）。看起来您的 PHP 正在为您添加到页面的每篇文章迭代此操作，行为正常，但任何列表项的任何点击都会导致整个事情按照您描述的方式进行。对于所选的任何项目，列表都会折叠/展开。

也许是这样的：

<div class="accordion-wrapper">
  {{#each section.articles}}
  <ul data-toggle="collapse" data-target="#VARIABLE" class="article-list article-list_page">
    <li class="article-list__item">
      <a>{{title}}</a>
      <article id="VARIABLE" class="article-body collapse">
      {{body}}  
      </article>
    </li>
  </ul>
  {{/each}}
</div>

我在这里插入了 VARIABLE，但您可能会保留目前正在使用的语法。也许使用文章的 ID 作为数据目标和文章 ID？（这样你就可以输入 {{id}} 来代替我输入的 VARIABLE）

动态手风琴不能完全工作

Dynamic accordion not fully working

html

dynamic

zendesk

handlebars.js