NodeJS 如何使用bootstrap进行动态崩溃

bihw5rsg 于 2022-12-03 发布在 Node.js

关注(0)|答案(1)|浏览(107)

我正在使用bootstrap，ejs和nodejs。试图用collapse组件列出我的数组值。我可以让每个组件都处于collapse状态，这样它就可以工作了。我不希望的是，当我单击其中一个collapse时，所有组件都打开了，当再次单击其中一个collapse时，所有组件都折叠并关闭了。我希望一个接一个地看到它们，所以每当我单击其中一个collapse时，我只希望看到其中一个collapse。

<%- 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>

node.js

来源：https://stackoverflow.com/questions/57098500/how-to-make-dynamic-collapse-with-bootstrap

1条答案

按热度按时间

mrphzbgm1#

这是因为你所有的目标都在循环.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>
    <% } %>
<% } %>

赞(0）回复(0）举报 2022-12-03

我来回答

NodeJS 如何使用bootstrap进行动态崩溃

1条答案

相关问题

热门标签

最新问答