मुझे पहले यहां पोस्ट किए गए प्रश्न के समान समस्या हो रही है। बूटस्ट्रैप शुरू में ध्वस्त तत्व मैंने अपने कोड के समस्या निवारण में इस प्रश्न से नोट्स का उपयोग करने का प्रयास किया है, लेकिन अभी तक मुझे यह काम करने के लिए नहीं मिला है।

मूल रूप से, मेरे पास एक अकॉर्डियन सूची है जो किसी अन्य अकॉर्डियन के भीतर नेस्टेड है। अब तक, मेरा पहला अकॉर्डियन मेनू पहली बार देखने पर ढहने के लिए तैयार है। हालांकि, इसके भीतर नेस्टेड अकॉर्डियन मेनू में हमेशा एक टैब खुला होता है, और यह हमेशा एक ही टैब भी नहीं होता है (उदाहरण के लिए, कभी-कभी पहला टैब वह होता है जो विस्तारित/दिखा रहा होता है, और दूसरी बार यह अंतिम या दूसरा टैब होता है। )

चूंकि मेरा अकॉर्डियन ढहने के लिए तैयार है, और कभी भी "पतन" तत्व नहीं था, मुझे सच में यकीन नहीं है कि यह विस्तार क्यों कर रहा है? मैंने अपने डेटा-टॉगल को क्रमशः असत्य और पतन में बदलने का भी प्रयास किया है, लेकिन मुझे यकीन नहीं है कि मुझे स्वरूपण गलत हो रहा है, और यही कारण है कि यह काम नहीं करेगा।

<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>
2
Emma Chisholm 16 सितंबर 2019, 21:18

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>
1
Otávio Barreto 17 सितंबर 2019, 00:05