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

Question

我有一个类似的问题，第一次张贴在这里。bootstrap initially collapsed element我尝试使用这个问题中的注释来排除我自己的代码，但到目前为止，我还没有让它开始工作。

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

因为我的手风琴注定要倒塌，而且从来没有“崩溃”的元素，我真的不知道为什么它在膨胀？我还试着将我的数据-切换为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>

Answer 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.&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>

​