将 Bootstrap Accordion 设置为关闭并在单击时展开选项卡
Posted
技术标签:
【中文标题】将 Bootstrap Accordion 设置为关闭并在单击时展开选项卡【英文标题】：Setting Bootstrap Accordion to be closed & expand tab on click 【发布时间】：2020-01-17 14:50:02 【问题描述】：我遇到了与此处首次发布的问题类似的问题。 bootstrap initially collapsed element 我曾尝试使用此问题中的注释对我自己的代码进行故障排除，但到目前为止我还没有让它工作。
基本上，我有一个手风琴列表嵌套在另一个手风琴中。到目前为止，我的第一个手风琴菜单设置为在第一次查看时折叠。但是，嵌套在其中的手风琴菜单始终打开一个选项卡，甚至不总是同一个选项卡（例如，有时第一个选项卡是展开/显示的选项卡，有时是最后一个或第二个选项卡。 )
由于我的手风琴设置为折叠，并且从未有“折叠”元素，我真的不确定它为什么会展开？我也尝试将我的 data-toggle 分别更改为 false 和 collapse，但我不确定我的格式是否错误，这就是它不起作用的原因。
<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. </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." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In Command Prompt, type in "ipconfig/all." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section. </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. </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>
【问题讨论】：
你使用的是什么引导版本？ 我使用 bootstrap studio 创建网站的骨架，自从导出它后，我一直通过 text wrangler 和 dreamweaver 对其进行编辑 【参考方案1】：如果您阅读引导文档，它会告诉您通过 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. </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." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In Command Prompt, type in "ipconfig/all." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section. </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. </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. </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." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In Command Prompt, type in "ipconfig/all." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section. </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. </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>【讨论】：
当我测试这个时，第一个选项卡仍然展开。在 JS 部分中将折叠高度设置为 0 会改变这一点吗？我试图让它看起来关闭。 所以您还想在单击另一个标签时隐藏computers 标签？操作系统只是调整windows 10 tab 的大小以适应computers tab
不，我希望嵌套在计算机选项卡中的选项卡都被折叠。现在第一个已展开。
喜欢windows 10 和Windows XP, Vista, 7, 8 在单击计算机选项卡时显示和隐藏？展开两个你的意思？
就像他们的标题说 windows 10 & windows XP, Vista, 7, 8 会显示，但里面的内容/指令不会显示，除非它被点击。以上是关于将 Bootstrap Accordion 设置为关闭并在单击时展开选项卡的主要内容，如果未能解决你的问题，请参考以下文章
带有下拉图标-chevron 的 Bootstrap Accordion 导航
Bootstrap Accordion 在集成到 CMS 时恶意滑动
AngularJs的UI组件ui-Bootstrap分享——Accordion