javascript - 如何创建动态 Accordion ？

Question

我正在尝试在 html 模板中使我的 Accordion 动态化，但我不知道如何做到这一点。

我的 html 模板很好，但我不知道如何添加 javascript 部分以便打开/关闭以变量 {{category}} 作为主面板的子面板。

这是我的 HTML 代码:

{% for category in category_list %}
    <div class="panel-group accordion" id="accordion" role="tablist" aria-multiselectable="true">

      <div class="panel panel-default">
          <div class="panel-heading" role="tab">
              <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                      <i class="more-less glyphicon glyphicon-plus"></i>
                      {{ category }}
                  </a>
              </h4>
          </div>
          {% for publication in category.publication.all %}
          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="accordion">
              <div class="panel-body">
                    {{ publication }}
              </div>
           </div>
          {% endfor %}
      </div>

    </div>
{% endfor %}

我对 Javascript 还很陌生，我做了类似的东西，但它不起作用:

function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);

我不知道为什么，但它只打开第一个 Accordion 面板，即使我单击第二个或第三个面板..

Answer 1

您显示的代码不处理面板的隐藏/显示，因此我假设您正在使用 JS 库，并且该库正在使用 id 和数据来映射事物。

如果是这种情况，您所需要的就是使用唯一的 id，否则它将始终停在它找到的第一个 accordion 处。

为此，请使用循环索引:

<div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist" aria-multiselectable="true">

并将其链接到您的a，如下所示:

<a role="button" data-toggle="collapse" data-parent="#accordion_{{ category.id }}" href="#collapseOne_{{ issue }}" aria-expanded="true" aria-controls="collapseOne">

这里我们有一个问题:您还需要为每个 CollapseOne 有一个唯一的 id，但 publication 循环位于 a 之后创建。不管怎样，用一个 a 打开多个元素是很奇怪的，所以为什么不让它只有一个呢？

<div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="accordion">
{% for publication in category.publication.all %}
          <div class="panel-body">
                {{ publication }}
          </div>
{% endfor %}
</div>

将 a 中之前的 {{ issues }} 替换为 {{category }} 即可设置。现在看看你的库是否按假设工作^^

您必须设置{{category.id}}，因为如果您的category字段包含空格，它将不起作用。

而且我不习惯模板，所以我希望它能让你做到这一点:p