Question

我正在尝试使html模板中的手风琴充满活力，但我不知道该怎么做。

我的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 %}

我对Java语言还很陌生，我做了类似的事情，但这是行不通的：

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

您显示的代码与面板的隐藏/显示无关，因此，我假设您使用的是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>

将{{ issue }}中的上一个a替换为{{ category }}，您将被设置。现在查找您的库是否按假定的方式工作^^

您必须设置{{category.id}}，因为如果您的category字段包含空格，它将无法正常工作。

我也不习惯使用模板，所以我希望它可以帮助您：p

如何创建动态手风琴？

1 个答案: