如何创建动态手风琴？

Question

我正试图在我的 html 模板中使我的手风琴动态，但我不知道该怎么做。

我的 html 模板很好，但我不知道如何添加 javascript 部分以便 open/close 子面板将变量 {{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);

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

Answer 1

您显示的代码不处理 hiding/showing 面板，因此我假设您使用的是 JS 库并且该库使用 ID 和数据来映射事物.

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

为此，请使用循环索引：

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

然后 link 它到你的 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中之前的{{ issue }}替换为{{ category }}，应该就设置好了。现在看看你的图书馆是否按假设工作^^

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

另外我不习惯使用模板所以我希望它能让你这样做:p

如何创建动态手风琴？

How to create dynamic accordion?

html

javascript

jquery

accordion