node.js - 如何使用引导程序进行动态折叠
问题描述
我正在使用引导、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>
解决方案
这是因为你所有的目标都在引用.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>
<% } %>
<% } %>
推荐阅读
- javascript - API请求中的`formData.append('files[]', file)`是什么意思?
- elixir - 混合 cmd 别名的引用和转义
- sql - 如何计算运行总计?
- python - 解析 .txt 文件并在 python 中写入 excel
- javascript - 如何在 Vue.js 和 WordPress 中使用多个过滤器进行分页(或延迟加载无限滚动)
- c++ - ANTLR4 在某台机器上找不到任何令牌,但在我的具有相同输入文件的情况下工作正常
- odata - NavigationProperty 的简单选择下拉菜单
- php - 在 ASP.NET 表单中调用 PHP 脚本
- php - Keycloak 密码策略
- tensorflow - 在 Keras 中跨两个并行层的反向传播