我正在使用引导程序，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>
答案 0 :(得分：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>
<% } %>
<% } %>