设置 Bootstrap 手风琴在单击时关闭并展开选项卡

Question

我遇到了与此处首次发布的问题类似的问题。 bootstrap initially collapsed element 我已经尝试使用这个问题中的注释来对我自己的代码进行故障排除，但到目前为止我还没有让它工作。

基本上，我有一个嵌套在另一个手风琴中的手风琴列表。到目前为止，我的第一个手风琴菜单设置为在第一次查看时折叠。然而，嵌套在其中的手风琴菜单总是有一个选项卡打开，而且它甚至不总是同一个选项卡（例如，有时第一个选项卡是 expanded/showing，而其他时候是最后一个或第二个标签。)

由于我的手风琴设置为折叠，并且从来没有 "collapse in" 元素，我真的不确定它为什么会展开？我也尝试过分别将我的数据切换更改为 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.&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>

Answer 1

如果您阅读 bootstrap 文档，它会告诉您通过 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>

外bootstrap卡

再举例

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

设置 Bootstrap 手风琴在单击时关闭并展开选项卡

Setting Bootstrap Accordion to be closed & expand tab on click

html

javascript

css

jquery

bootstrap-accordion