时间戳

首页 > 解决方案 > 为什么 Bootstrap Collapse 不会为每次迭代显示不同的项目？

html - 为什么 Bootstrap Collapse 不会为每次迭代显示不同的项目？

问题描述

我正在遍历 Jinjia 中的 dict 列表以隐藏或显示字典的值，如下所示：

{% for data_dict in data_list %}
 {% for key, data in data_dict.items() %}
     {% if data is iterable %}
     <dd>
        <a data-toggle="collapse" href="#rel">{{ data.keys() }}</a>
        <div id="rel" class="collapse">
          {{ data.values() }}
         </div>
     </dd>
    {% endif %}
{% endfor %}

{% endfor %}

但是，对于显示的键值对列表，当我单击它时，第一对用于隐藏/显示效果。但是从第二个开始，它总是显示字典中字典的第一个元素。要显示的 href 是：

http://localhost:5000/np/wg#rel

那是因为它总是引用字典中的第一个元素，即使我打算遍历它？但是“data.keys()”部分是正确的，这意味着我在外循环中的每次迭代都有不同的键字符串。我想我可能需要执行以下操作，但 {{ loop.index }} 应该引用第一个“for”循环“data_list”。不知道该怎么做。

href="#rel-{{loop.index}}

自举参考如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

标签： htmlcssbootstrap-4jinja2bootstrap-accordion

解决方案

推荐阅读