将引导手风琴设置为关闭并在单击时展开选项卡



我遇到了与这里首次发布的问题类似的问题。 引导最初折叠的元素 我已经尝试使用这个问题中的注释来对我自己的代码进行故障排除,但到目前为止我还没有让它工作。

基本上, 我有一个手风琴列表嵌套在另一个手风琴中.到目前为止,我的第一个手风琴菜单设置为在第一次查看时折叠.但是,嵌套在其中的手风琴菜单始终打开一个选项卡,它甚至并不总是相同的选项卡(例如,有时第一个选项卡是展开/显示的选项卡,有时它是最后一个或第二个选项卡。(

由于我的手风琴被设置为崩溃,并且从未有过"折叠"元素,我真的不确定它为什么要扩展?我还尝试将数据切换分别更改为 false 和折叠,但我不确定我是否格式错误,这就是它不起作用的原因。

<div role="tablist" id="accordion-1">
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-1" href="div#accordion-1 .item-1">Computers</a></h5>
</div>
<div class="collapse item-1" role="tabpanel" data-parent="#accordion-1">
<div class="card-body">
<div role="tablist" id="accordion-2">
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-controls="accordion-2 .item-1" href="div#accordion-2 .item-1">Windows 10</a></h5>
</div>
<div class="collapse item-1" role="tabpanel" data-parent="#accordion-2">
<div class="card-body">
<p class="card-text">i. Connect to any Wi-Fi network.</p>
<p class="card-text">ii. Click on your Wi-Fi icon</p><img src="___.PNG">
<p class="card-text">iii. In the available Wi-Fi network list, underneath the Instaconnect Wi-Fi network, click on Properties.&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In the new window, scroll all the way to the bottom. The WiFi MAC address is listed as the Physical (MAC) Address</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Register this to the resident's account as a Desktop or Laptop.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-2 .item-2" href="div#accordion-2 .item-2">Windows XP, Vista, 7, 8</a></h5>
</div>
<div class="collapse item-2" role="tabpanel" data-parent="#accordion-2">
<div class="card-body">
<p class="card-text">i. Click on Windows icon on the Desktop, or click the Windows button on your keyboard.</p>
<p class="card-text">ii. In the search bar, type in "command prompt" or "cmd."&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In Command Prompt, type in "ipconfig/all."&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section.&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">vi. In that section, the Wi-Fi MAC Address is listed as the Physical Address.&nbsp;</p>
<p class="card-text">vii. Register this to the resident's account as a Desktop or Laptop</p>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

如果您阅读引导文档,它会告诉您通过 jquery 初始化

$('.collapse').collapse()

这是你要找的:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="main" href="#collapseOne">
<div class="card">
<div class="card-header">
Computers
</div>
</a>
</h4>
</div>
<div class="card-body">
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="1" href="#collapseTwo">
<div class="card">
<div class="card-header">
Windows 10
</div>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="card">

<div class="card-body">
<p class="card-text">i. Connect to any Wi-Fi network.</p>
<p class="card-text">ii. Click on your Wi-Fi icon</p><img src="___.PNG">
<p class="card-text">iii. In the available Wi-Fi network list, underneath the Instaconnect Wi-Fi network, click on Properties.&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In the new window, scroll all the way to the bottom. The WiFi MAC address is listed as the Physical (MAC) Address</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Register this to the resident's account as a Desktop or Laptop.</p>
</div>
</div></br>
</div></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="2" href="#collapseThree">
<div class="card">
<div class="card-header">
Windows XP, Vista, 7, 8
</div> </div>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="card">
<div class="card-body"> <p class="card-text">i. Click on Windows icon on the Desktop, or click the Windows button on your keyboard.</p>
<p class="card-text">ii. In the search bar, type in "command prompt" or "cmd."&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In Command Prompt, type in "ipconfig/all."&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section.&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">vi. In that section, the Wi-Fi MAC Address is listed as the Physical Address.&nbsp;</p>
<p class="card-text">vii. Register this to the resident's account as a Desktop or Laptop</p>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

引导卡之外的另一个例子

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="main" href="#collapseOne">
<div class="card">
<div class="card-header">
Computers
</div>
</a>
</h4>
</div>
<div class="card-body">
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="1" href="#collapseTwo">
<div class="card">
<div class="card-header">
Windows 10
</div>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="card-body">
<p class="card-text">i. Connect to any Wi-Fi network.</p>
<p class="card-text">ii. Click on your Wi-Fi icon</p><img src="___.PNG">
<p class="card-text">iii. In the available Wi-Fi network list, underneath the Instaconnect Wi-Fi network, click on Properties.&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In the new window, scroll all the way to the bottom. The WiFi MAC address is listed as the Physical (MAC) Address</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Register this to the resident's account as a Desktop or Laptop.</p>
</div>
</div></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="2" href="#collapseThree">
<div class="card">
<div class="card-header">
Windows XP, Vista, 7, 8
</div> </div>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="card-body">
<p class="card-text">i. Click on Windows icon on the Desktop, or click the Windows button on your keyboard.</p>
<p class="card-text">ii. In the search bar, type in "command prompt" or "cmd."&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In Command Prompt, type in "ipconfig/all."&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section.&nbsp;</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">vi. In that section, the Wi-Fi MAC Address is listed as the Physical Address.&nbsp;</p>
<p class="card-text">vii. Register this to the resident's account as a Desktop or Laptop</p>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>