Bootstrap 手風琴擴展，但不崩潰？
[英]Bootstrap Accordions expanding, but not collapsing?
問題描述
我在使用 bootstrap 5 手風琴時遇到問題。 它們都可以毫無問題地擴展，但不會倒塌。 我不知道是我的 JS 還是 CSS 引起了問題。 我在 Chrome 的控制台中沒有看到任何錯誤。
https://www.harpercollege.edu/dev/whoward-dev-area/df.php
我將它們復制到 codepen 中，沒有任何問題。
<h2>Important Dates (Fall 2022)</h2> <div class="accordion"> <div class="accordion-group"> <div class="accordion-alt-1"> <div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e639"> 16-Week Classes (August 22 - December 16)</a></div> </div> <div id="collapse_d15e639" class="accordion-body collapse"> <div class="accordion-inner"> <div class="harperTable"> <table> <tbody> <tr> <td><span>April 18-20, 2022</span></td> <td><span>Fall priority registration begins</span></td> </tr> <tr> <td><span>April 21, 2022</span></td> <td><span>Open registration for Fall 2022 for all students.</span></td> </tr> <tr> <td>August 22, 2022</td> <td>16-week classes begin this week</td> </tr> <tr> <td>August 29, 2022</td> <td>Last day to drop for 100% refund for 16-week classes</td> </tr> <tr> <td>September 5, 2022</td> <td>College closed in observance of Labor Day</td> </tr> <tr> <td>September 7, 2022</td> <td>First Financial Aid Disbursement</td> </tr> <tr> <td>November 8, 2022</td> <td>College closed in observance of General Election Day</td> </tr> <tr> <td>November 21, 2022</td> <td>Last day to withdraw from 16-week classes</td> </tr> <tr> <td>November 23-27, 2022</td> <td>Thanksgiving Break</td> </tr> <tr> <td>December 12-16, 2022</td> <td>Final Exam Week</td> </tr> <tr> <td>December 21, 2022</td> <td>Grades available online</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="accordion"> <div class="accordion-group"> <div class="accordion-alt-1"> <div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e685"> First 8-Week Classes (August 22 - October 16)</a></div> </div> <div id="collapse_d15e685" class="accordion-body collapse"> <div class="accordion-inner"> <div class="harperTable"> <table> <tbody> <tr> <td><span>April 18-20, 2022</span></td> <td><span>Fall priority registration begins</span></td> </tr> <tr> <td><span>April 21, 2022</span></td> <td><span>Open registration for Fall 2022 for all students.</span></td> </tr> <tr> <td>August 22, 2022</td> <td>First 8-week classes begin this week</td> </tr> <tr> <td>August 29, 2022</td> <td>Last day to drop for 100% refund for first 8-week classes</td> </tr> <tr> <td>September 5, 2022</td> <td>College closed in observance of Labor Day</td> </tr> <tr> <td>September 7, 2022</td> <td>First Financial Aid Disbursement</td> </tr> <tr> <td>October 3, 2022</td> <td>Last day to withdraw from first 8-week classes</td> </tr> <tr> <td>October 16, 2022</td> <td>First 8-week classes end</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="accordion"> <div class="accordion-group"> <div class="accordion-alt-1"> <div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e722"> Second 8-Week Classes (October 17 - December 11)</a></div> </div> <div id="collapse_d15e722" class="accordion-body collapse"> <div class="accordion-inner"> <div class="harperTable"> <table> <tbody> <tr> <td><span>April 18-20, 2022</span></td> <td><span>Fall priority registration begins</span></td> </tr> <tr> <td><span>April 21, 2022</span></td> <td><span>Open registration for Fall 2022 for all students.</span></td> </tr> <tr> <td>October 17, 2022</td> <td>Second 8-week classes begin this week</td> </tr> <tr> <td>October 24, 2022</td> <td>Last day to drop for 100% refund for second 8-week classes.</td> </tr> <tr> <td>November 8, 2022</td> <td>College closed in observance of General Election Day</td> </tr> <tr> <td>November 23-27, 2022</td> <td>Thanksgiving Break</td> </tr> <tr> <td>November 28, 2022</td> <td>Last day to withdraw from second 8-week classes.</td> </tr> <tr> <td>December 11, 2022</td> <td>Second 8-week term ends</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="accordion"> <div class="accordion-group"> <div class="accordion-alt-1"> <div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e759"> First 13-week Classes (August 22 - November 20)</a></div> </div> <div id="collapse_d15e759" class="accordion-body collapse"> <div class="accordion-inner"> <div class="harperTable"> <table> <tbody> <tr> <td><span>April 18-20, 2022</span></td> <td><span>Fall priority registration begins</span></td> </tr> <tr> <td><span>April 21, 2022</span></td> <td><span>Open registration for Fall 2022 for all students.</span></td> </tr> <tr> <td>August 22, 2022</td> <td>First 13-week classes begin this week</td> </tr> <tr> <td>August 29, 2022</td> <td>Last day to drop for 100% refund for first 13-week classes</td> </tr> <tr> <td>September 5, 2022</td> <td>College closed in observance of Labor Day</td> </tr> <tr> <td>September 7, 2022</td> <td>First Financial Aid Disbursement</td> </tr> <tr> <td>November 8, 2022</td> <td>College closed in observance of General Election Day</td> </tr> <tr> <td>October 31, 2022</td> <td>Last day to withdraw from first 13-week classes</td> </tr> <tr> <td>November 22, 2022</td> <td>First 13-week classes end.</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="accordion"> <div class="accordion-group"> <div class="accordion-alt-1"> <div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e799"> Second 13-week Classes (September 19 - December 16)</a></div> </div> <div id="collapse_d15e799" class="accordion-body collapse"> <div class="accordion-inner"> <div class="harperTable"> <table> <tbody> <tr> <td><span>April 18-20, 2022</span></td> <td><span>Fall priority registration begins</span></td> </tr> <tr> <td><span>April 21, 2022</span></td> <td><span>Open registration for Fall 2022 for all students.</span></td> </tr> <tr> <td>September 19, 2022</td> <td>Second 13-week classes begin this week</td> </tr> <tr> <td>September 26, 2022</td> <td>Last day to drop for 100% refund for second 13-week classes</td> </tr> <tr> <td>November 8, 2022</td> <td>College closed in observance of General Election Day</td> </tr> <tr> <td>November 23-27, 2022</td> <td>Thanksgiving Break</td> </tr> <tr> <td>November 28, 2022</td> <td>Last day to withdraw from second 13-week classes</td> </tr> <tr> <td>December 16, 2022</td> <td>Second 13-week classes end.</td> </tr> </tbody> </table> </div> </div> </div></div> </div> <div class="accordion"> <div class="accordion-group"> <div class="accordion-alt-1"> <div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e836"> Important Dates for All Parts of Term</a></div> </div> <div id="collapse_d15e836" class="accordion-body collapse"> <div class="accordion-inner"> <p><a href="https://www.harpercollege.edu/registration/pdf/web_dates_04192022.pdf">Fall 2022 Important Dates for All Parts of Term (pdf)</a></p> </div> </div> </div> </div> <div class="accordion"> <div class="accordion-group"> <div class="accordion-alt-1"> <div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e846"> Final Examination Schedule</a></div> </div> <div id="collapse_d15e846" class="accordion-body collapse"> <div class="accordion-inner"> <p><a href="https://www.harpercollege.edu/registration/pdf/finalexamschedule_fall_2022.pdf">Final Examination Schedule Fall 2022 (pdf)</a></p> </div> </div><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script></div>2 個解決方案
解決方案1
2 已采納 2022-12-02 20:51:59
請立即檢查此代碼。 現在工作正常。 您錯過了父 ID 和屬性 data-bs-parent="#accordionExample"。
<h2>Important Dates (Fall 2022)</h2>
<div class="accordion-content" id="accordionExample">
<div class="accordion">
<div class="accordion-group">
<div class="accordion-alt-1">
<div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e639">
16-Week Classes (August 22 - December 16)</a></div>
</div>
<div id="collapse_d15e639" class="accordion-body collapse" data-bs-parent="#accordionExample">
<div class="accordion-inner">
<div class="harperTable">
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>August 22, 2022</td>
<td>16-week classes begin this week</td>
</tr>
<tr>
<td>August 29, 2022</td>
<td>Last day to drop for 100% refund for 16-week classes</td>
</tr>
<tr>
<td>September 5, 2022</td>
<td>College closed in observance of Labor Day</td>
</tr>
<tr>
<td>September 7, 2022</td>
<td>First Financial Aid Disbursement</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>November 21, 2022</td>
<td>Last day to withdraw from 16-week classes</td>
</tr>
<tr>
<td>November 23-27, 2022</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>December 12-16, 2022</td>
<td>Final Exam Week</td>
</tr>
<tr>
<td>December 21, 2022</td>
<td>Grades available online</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-group">
<div class="accordion-alt-1">
<div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e685">
First 8-Week Classes (August 22 - October 16)</a></div>
</div>
<div id="collapse_d15e685" class="accordion-body collapse" data-bs-parent="#accordionExample">
<div class="accordion-inner">
<div class="harperTable">
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>August 22, 2022</td>
<td>First 8-week classes begin this week</td>
</tr>
<tr>
<td>August 29, 2022</td>
<td>Last day to drop for 100% refund for first 8-week classes</td>
</tr>
<tr>
<td>September 5, 2022</td>
<td>College closed in observance of Labor Day</td>
</tr>
<tr>
<td>September 7, 2022</td>
<td>First Financial Aid Disbursement</td>
</tr>
<tr>
<td>October 3, 2022</td>
<td>Last day to withdraw from first 8-week classes</td>
</tr>
<tr>
<td>October 16, 2022</td>
<td>First 8-week classes end</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-group">
<div class="accordion-alt-1">
<div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e722">
Second 8-Week Classes (October 17 - December 11)</a></div>
</div>
<div id="collapse_d15e722" class="accordion-body collapse" data-bs-parent="#accordionExample">
<div class="accordion-inner">
<div class="harperTable">
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>October 17, 2022</td>
<td>Second 8-week classes begin this week</td>
</tr>
<tr>
<td>October 24, 2022</td>
<td>Last day to drop for 100% refund for second 8-week classes.</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>November 23-27, 2022</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>November 28, 2022</td>
<td>Last day to withdraw from second 8-week classes.</td>
</tr>
<tr>
<td>December 11, 2022</td>
<td>Second 8-week term ends</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-group">
<div class="accordion-alt-1">
<div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e759">
First 13-week Classes (August 22 - November 20)</a></div>
</div>
<div id="collapse_d15e759" class="accordion-body collapse" data-bs-parent="#accordionExample">
<div class="accordion-inner">
<div class="harperTable">
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>August 22, 2022</td>
<td>First 13-week classes begin this week</td>
</tr>
<tr>
<td>August 29, 2022</td>
<td>Last day to drop for 100% refund for first 13-week classes</td>
</tr>
<tr>
<td>September 5, 2022</td>
<td>College closed in observance of Labor Day</td>
</tr>
<tr>
<td>September 7, 2022</td>
<td>First Financial Aid Disbursement</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>October 31, 2022</td>
<td>Last day to withdraw from first 13-week classes</td>
</tr>
<tr>
<td>November 22, 2022</td>
<td>First 13-week classes end.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-group">
<div class="accordion-alt-1">
<div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e799">
Second 13-week Classes (September 19 - December 16)</a></div>
</div>
<div id="collapse_d15e799" class="accordion-body collapse" data-bs-parent="#accordionExample">
<div class="accordion-inner">
<div class="harperTable">
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>September 19, 2022</td>
<td>Second 13-week classes begin this week</td>
</tr>
<tr>
<td>September 26, 2022</td>
<td>Last day to drop for 100% refund for second 13-week classes</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>November 23-27, 2022</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>November 28, 2022</td>
<td>Last day to withdraw from second 13-week classes</td>
</tr>
<tr>
<td>December 16, 2022</td>
<td>Second 13-week classes end.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-group">
<div class="accordion-alt-1">
<div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e836">
Important Dates for All Parts of Term</a></div>
</div>
<div id="collapse_d15e836" class="accordion-body collapse" data-bs-parent="#accordionExample">
<div class="accordion-inner">
<p><a href="https://www.harpercollege.edu/registration/pdf/web_dates_04192022.pdf">Fall 2022
Important Dates for All Parts of Term (pdf)</a></p>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-group">
<div class="accordion-alt-1">
<div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e846">
Final Examination Schedule</a></div>
</div>
<div id="collapse_d15e846" class="accordion-body collapse" data-bs-parent="#accordionExample">
<div class="accordion-inner">
<p><a href="https://www.harpercollege.edu/registration/pdf/finalexamschedule_fall_2022.pdf">Final
Examination Schedule Fall 2022 (pdf)</a></p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
</div>
</div>
</div>
解決方案2
1 2022-12-02 20:42:04
我沒有使用 Bootstrap 手風琴，而是使用了以下運行良好的結構。 它打開單擊的面板並關閉可能已經打開的任何其他面板。
CSS
.FAQ {
margin: 0 auto;
max-width: 100%;
}
.FAQcard {
margin: 10px 0;
position: relative;
}
.FAQtitle {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
color: #000;
font-weight: bold;
font-size: 150%;
cursor: default;
display: block;
padding: 1em 1.5em;
position: relative;
text-align: left;
}
.FAQtitle::after {
content: " ";
width: 8px;
height: 8px;
border-right: 1px solid #4a6e78;
border-bottom: 1px solid #4a6e78;
position: absolute;
right: 20px;
top: 20px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.FAQtitle.active::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.FAQpanel {
background: #f1f2f3;
color: #000;
display: none;
margin: 0;
padding: 2em;
text-align: left;
}
.FAQpanel p {
margin-bottom: 5px;
text-align: justify;
}
HTML
<div class="FAQ">
<div class="FAQcard">
<div class="FAQtitle">Test Panel 1</div>
<div class="FAQpanel fs-5">
Test text for panel 1
</div>
</div>
<div class="FAQcard">
<div class="FAQtitle">Test Panel 2</div>
<div class="FAQpanel fs-5">
Test text for panel 2
</div>
</div>
</div>
Javascript 在 (document).ready() function 里面：
$(".FAQtitle").click(function (j) {
var dropDown = $(this).closest(".FAQcard").find(".FAQpanel");
$(this).closest(".FAQ").find(".FAQpanel").not(dropDown).slideUp();
if ($(this).hasClass("active")) {
$(this).removeClass("active").removeClass("selected");
} else {
$(this).closest(".FAQ").find(".FAQtitle.active").removeClass("active").removeClass("selected");
$(this).addClass("active selected");
}
dropDown.stop(false, true).slideToggle();
j.preventDefault();
});
希望這對你有幫助！
在使用Bootstrap 4擴展另一個時，我需要折疊一個幫助
[英]I need help collapsing one when expanding another using bootstrap 4
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.