一键打开多个引导折叠面板[重复]

Question

我正在使用 Django 开发一种博客类型的网络应用程序。在我的主页上，我想显示所有帖子。每个帖子都包含一个折叠面板。

最初，触发折叠面板的 ID 是硬编码的，因此所有折叠面板都会在单击一个折叠后面板时打开。

所以我更改了用于触发折叠面板的 id。我使用 post id 作为 HTML id 或触发折叠面板。

但问题是折叠面板根本不起作用。

这就是我更改硬编码 ID 的方式。

 {% for post in posts %}
            <div class="container shadow mt-4 pl-3 pr-3 pb-3" style="border-radius: 10px;">
                <div class="user row p-3">
                    <img class="rounded-circle img-avatar" src="{{ post.author.profile.image.url }}" alt="">
                    <p class="author-name font-weight-bold font ml-4 mt-3">Username</p>
                </div>

                <div class="question">
                    <p>{{ post.question }}</p>
                </div>

                <button class="mb-2" style="border: none;  background-color: transparent" type="button"
                        data-toggle="collapse"
                        data-target={{ "#"|join:post.id }}
                                aria-expanded="false" aria-controls={{ post.id|slugify }}>
                    <i class="fas fa-angle-down pl-1 pr-1"></i>
                </button>


                <div class="collapse" style="overflow: hidden" id={{ post.id|slugify }}>
                    <div class="card card-body options">
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option1 }}</span></li>
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option2 }}</span></li>
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option3 }}</span></li>
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option4 }}</span></li>
                        {% if post.option5 %}
                            <li class="options"><input type="radio" name="options"><span
                                    class="pl-2 pr-3">{{ post.option5 }}</span></li>
                        {% endif %}
                    </div>
                    <button type="submit" class="btn btn-primary float-right mt-3">Submit</button>
                </div>
            </div>
        {% endfor %}

这是我从 bootstrap4 组件中获取的代码。

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Answer 1

data-target="#{{ post.id }}" 这应该会解决。