一个按钮单击多个引导折叠面板就会打开。

Question

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

最初，id的触发崩溃面板是硬编码的，所以所有的崩溃面板打开点击一个崩溃后面板。

所以我更改了用来触发崩溃面板的id。我使用post id作为HTML 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 }}"这将修复。