如何使用引导程序进行动态折叠答案

【问题标题】：How to make dynamic collapse with bootstrap如何使用引导程序进行动态折叠
【发布时间】：2019-11-27 14:59:18
【问题描述】：

我正在使用 bootstrap、ejs 和 nodejs。尝试使用折叠组件列出我的数组值。我可以让每个组件都崩溃，这样它就可以工作了。我不想要的东西，当我单击其中一个折叠时，它们都会打开，当再次单击其中一个时，它们都会折叠并关闭。我想一一看到它们，所以每当我点击其中一个时，我只想看到其中一个。

<%- include('includes/head.ejs') %><link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
<link rel="stylesheet" href="assets/css/Contact-Form-Clean.css">
<link rel="stylesheet" href="assets/css/Header-Blue.css">
<link rel="stylesheet" href="assets/css/styles.css">

</head>
<body>
<div>
    <div class="header-blue">
        <nav class="navbar navbar-dark navbar-expand-md navigation-clean-search">
            <div class="container"><a class="navbar-brand" href="/">Agenda App</a>
                <button data-toggle="collapse" class="btn btn-link collapsed" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span
                            class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse"
                     id="navcol-1">
                    <ul class="nav navbar-nav">
                        <li class="nav-item" role="presentation"><a class="nav-link" href="/">Home Page</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link active" href="/addresses">Addresses</a></li>
                    </ul>
                    <form class="form-inline mr-auto" target="_self">
                        <div class="form-group"><input class="form-control search-field" type="search" id="search-field"
                                                       name="search"></div>
                    </form>
                    <span class="navbar-text"> <a class="login" href="#">Log In</a></span><a
                            class="btn btn-light action-button" role="button" href="#">Sign Up</a></div>
            </div>
        </nav>
    </div>
</div>
<div role="tablist" id="accordion-1" style="margin: 5% 0 ;" class="accordion">
    <% if (contactsArray.length > 0) { %>
        <% for (let contact of contactsArray) { %>
            <div class="card">
                <div class="card-header" role="tab">
                    <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="true" aria-controls="accordion-1 .item-1"
                                        href="div#accordion-1 .item-1"><%= contact.name %></a></h5>
                </div>
                <div class="collapse show item-1" role="tabpanel" data-parent="#accordion-1">
                    <div class="card-body"><strong>Email</strong>
                        <p><%= contact.email %></p><strong>Phone Number</strong>
                        <p><%= contact.phone %></p><strong>Address</strong>
                        <p class="card-text"><%= contact.address %></p>
                    </div>
                </div>
            </div>
        <% } %>
    <% } %>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

<%- include('includes/end.ejs') %>

生成的html代码在这里

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
<link rel="stylesheet" href="assets/css/Contact-Form-Clean.css">
<link rel="stylesheet" href="assets/css/Header-Blue.css">
<link rel="stylesheet" href="assets/css/styles.css">

</head>
<body>
<div>
    <div class="header-blue">
        <nav class="navbar navbar-dark navbar-expand-md navigation-clean-search">
            <div class="container"><a class="navbar-brand" href="/">Agenda App</a>
                <button data-toggle="collapse" class="btn btn-link collapsed" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span
                            class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse"
                     id="navcol-1">
                    <ul class="nav navbar-nav">
                        <li class="nav-item" role="presentation"><a class="nav-link" href="/">Home Page</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link active" href="/addresses">Addresses</a></li>
                    </ul>
                    <form class="form-inline mr-auto" target="_self">
                        <div class="form-group"><input class="form-control search-field" type="search" id="search-field"
                                                       name="search"></div>
                    </form>
                    <span class="navbar-text"> <a class="login" href="#">Log In</a></span><a
                            class="btn btn-light action-button" role="button" href="#">Sign Up</a></div>
            </div>
        </nav>
    </div>
</div>
<div role="tablist" id="accordion-1" style="margin: 5% 0 ;" class="accordion">


            <div class="card">
                <div class="card-header" role="tab">
                    <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="true" aria-controls="accordion-1 .item-1"
                                        href="div#accordion-1 .item-1">First Contant</a></h5>
                </div>
                <div class="collapse show item-1" role="tabpanel" data-parent="#accordion-1">
                    <div class="card-body"><strong>Email</strong>
                        <p>example@example.com</p><strong>Phone Number</strong>
                        <p>99999999</p><strong>Address</strong>
                        <p class="card-text">Example address</p>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header" role="tab">
                    <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="true" aria-controls="accordion-1 .item-1"
                                        href="div#accordion-1 .item-1">Example 2</a></h5>
                </div>
                <div class="collapse show item-1" role="tabpanel" data-parent="#accordion-1">
                    <div class="card-body"><strong>Email</strong>
                        <p>example2@example2.com</p><strong>Phone Number</strong>
                        <p>88888888</p><strong>Address</strong>
                        <p class="card-text">Example 2 address</p>
                    </div>
                </div>
            </div>


</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

【问题讨论】：

可以分享一下你生成的html吗，好像所有的手风琴头都有相同的目标href="div#accordion-1 .item-1"
我添加了生成的 HTML 代码

标签： node.js bootstrap-4 ejs collapse

【解决方案1】：

这是因为您的所有目标都在引用.item-1。你必须根据你的循环索引来设置它。

试试这样的：

<% if (contactsArray.length > 0) { %>
    <% var index = 0; %>
    <% for (let contact of contactsArray) { %>
        <% index++ %>
        <div class="card">
            <div class="card-header" role="tab">
                <h5 class="mb-0">
                    <a 
                       data-toggle="collapse" 
                       aria-expanded="true" 
                       aria-controls="accordion-1 .item-1"
   HERE --->           href="div#accordion-1 .item-<%= index %>"><%= contact.name %></a>
                </h5>
            </div>
 HERE --->     <div class="collapse show item-<%= index %>" role="tabpanel" data-parent="#accordion-1">
                <div class="card-body"><strong>Email</strong>
                    <p><%= contact.email %></p><strong>Phone Number</strong>
                    <p><%= contact.phone %></p><strong>Address</strong>
                    <p class="card-text"><%= contact.address %></p>
                </div>
            </div>
        </div>
    <% } %>
<% } %>

【讨论】：