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

Posted 2023-02-24

【中文标题】一键打开多个引导折叠面板[重复]

【英文标题】：Multiple bootstrap collapse panel opens at one button click [duplicate]

【发布时间】：2020-09-07 14:36:45

【问题描述】：

我正在使用 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 " >
                    <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>

【参考方案1】：

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