如何在 HTML/Bootstrap 4 中使用变量作为选择器？

Question

我正在尝试创建一个for 循环以在 Bootstrap 中构建一个手风琴，但每次我单击按钮展开/折叠卡片时，每张卡片都会展开/折叠。我认为这是由于所有卡片共享id，所以我想使用帖子标题作为每张卡片的id 选择器。这是我目前拥有的代码：

  {% for post in blog_posts %}
    <div id="accordion">
      <div class="card">
        <h3 class="card-header" id="header">
          <button class="btn btn-info" data-toggle="collapse" 
          data-target="#body" aria-expanded="false" 
          aria-controls="post: ">
              {{ post.title }}
              <small><p>Posted by {{ post.author }} on 
              {{ post.date_added|date:'D M d, Y H:i' }}</p></small>
          </button>
        </h3>

        <div id="body" class="collapse show" aria-labelledby="header"
          data-parent="#accordion">
          <div class="card-body">
            {{ post.text|linebreaks }}
            <small>
              <a class="text-dark" href="{% url 'blogs:edit_post' post.id %}">
              edit post</a>
            </small>
          </div>
      </div>
    </div>

  {% empty %}
    <p>There are no posts to display.</p>
  {% endfor %}

我尝试将h3 id 更改为{{ post.title }}，但这似乎不起作用。非常感谢任何帮助。

Answer 1

示例代码： https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

您需要每个手风琴部分的 id 是唯一的（否则它们将同时打开），您可以使用 post.id。

{% if blog_posts %}
<div id="accordion">
  {% for post in blog_posts %}
      <div class="card">
        <h3 class="card-header" id="header-{{post.id}}">
          <button class="btn btn-info" data-toggle="collapse" 
          data-target="#post-{{post.id}}" aria-expanded="false" 
          aria-controls="post-{{post.id}}">
              {{ post.title }}
              <small><p>Posted by {{ post.author }} on 
              {{ post.date_added|date:'D M d, Y H:i' }}</p></small>
          </button>
        </h3>

        <div id="post-{{post.id}}" class="collapse show" aria-labelledby="header-{{post.id}}"
          data-parent="#accordion">
          <div class="card-body">
            {{ post.text|linebreaks }}
            <small>
              <a class="text-dark" href="{% url 'blogs:edit_post' post.id %}">
              edit post</a>
            </small>
          </div>
      </div>
  {% endfor %}
</div>

{% else %}
    <p>There are no posts to display.</p>
{% endif %}