為什么我的下拉式手風琴不起作用？

Question

試圖使一個簡單的下拉式手風琴正常工作，但不確定為什么單擊時它不會下拉。 希望在切換時獲得“全部折疊”按鈕以切換到“打開”（但並非絕對必要）。 也開放純CSS手風琴的想法。 對於javascript和JQuery來說還很新，因此任何信息都對此有所幫助。 TIA。

<div class="accordion">
    <div class="chapters___2NT4M js-chapters">
        <section id="table-of-contents" class="table_of_contents___2HR-W accordion">
            <header class="table_of_contents__chapter_title___2W8SV">
                <h2 class="table_of_contents__chapter_heading___19HQO" tabindex="0">Navigate to..</h2>
                <button class="table_of_contents__toggle_all___fVHqW accordion-header" aria-expanded="true" aria-pressed="true" aria-haspopup="true">Collapse all</button>
            </header>
            <div class="accordion-content">
            <ul class="table_of_contents__chapter_list___2gu-a" data-gtm-element="review_toc_list">
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#zener-diodes" data-gtm-element="review_toc_link">Zener Diodes</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#bridge-rectifiers" data-gtm-element="review_toc_link">Bridge Rectifiers</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#schottky-barrier-rectifiers" data-gtm-element="review_toc_link">Schottky Barrier Rectifiers</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#super-fast-recovery-rectifiers" data-gtm-element="review_toc_link">Super Fast Recovery Rectifiers</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#medium-power-bipolar-transistors" data-gtm-element="review_toc_link">Medium Power Bipolar Transistors</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#transient-protection" data-gtm-element="review_toc_link">Transient Protection</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#thyristor-modules" data-gtm-element="review_toc_link">thyristor Modules</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#obsoleted-eol-products" data-gtm-element="review_toc_link">Obsoleted/EOL Products</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#cross-reference" data-gtm-element="review_toc_link">Cross Reference</a></li>
            </ul>
            </div>
        </section>
    </div>
    </div>

CSS

.accordion-content {
    display: none;
    border-bottom: 1px solid #DDE0E7;
    background: #F6F7F9;
    padding: 1.5rem;
    color: #4a5666;
}

.accordion-header::before {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background-color: #B1B5BE;
    margin-right: .75rem;
}

.accordion-content.active {
    display: block;
    height: 200px;
}

@media (min-width: 80em) {
.chapters___2NT4M {
max-width: 570px;
}
}

.chapters___2NT4M {
clear: both;
margin-left: auto;
margin-right: auto
}

@media (min-width: 30em) {
.table_of_contents___2HR-W {
margin: 2em 0 0;
}
}

.table_of_contents___2HR-W {
border-top: 3px solid #000;
margin: 5em 0 0;
padding-top: 0;
}

article, aside, footer, header, nav, section {
display: block;
}

@media (min-width: 48em) {
.table_of_contents__chapter_title___2W8SV {
padding: 0;
}
}

.table_of_contents__chapter_title___2W8SV {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 1.5rem;
line-height: 1.5rem;
padding: .4em 0 1.2em;
}

@media (min-width: 80em) {
.table_of_contents__chapter_list___2gu-a {
margin-bottom: 57px;
}
}
@media (min-width: 48em) {
.table_of_contents__chapter_list___2gu-a {
display: block;
}
}

.table_of_contents__chapter_list___2gu-a {
display: ;
margin: 0 0 52px;
padding: 0;
list-style: none;
border-top: 0;
}

ol, ul {
margin: 0 0 1em 1.2em;
padding: 0;
}

@media (min-width: 48em) {
.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf {
font-size: 1.125rem;
line-height: 1.25rem;
}
}

.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf {
font-size: 1.1875rem;
line-height: 1.4375rem;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
margin-bottom: .8em;
}


.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf a, .d235 a {
color: #000;
}

.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf a {
color: #222;
text-decoration: none;
}

.table_of_contents__chapter_list___2gu-a  .table_of_contents__chapter_list_heading___3_laf a:hover {
color: #000;
border-bottom: 1px solid #000;
}

JS

$(document).ready();
$(".accordion").on("click", ".accordion-header", function() {
$(this).toggleClass("active").next().slideToggle();
});

Answer 1

您可以通過使用html元素details來獲得類似於手風琴的內容，而無需使用javascript。

<details>
    <summary>Title</summary>
    Some text
</details>

然后，當您單擊標題時，標題會自動擴展。 不需要js

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Answer 2

這里有一些問題，但我將從JS開始。 這里重要的是，在click函數中， this將是對被單擊元素的引用。 因此，當我閱讀本文時，您正在按鈕上切換活動類。

另外，我相信您打算將document.ready()用作運行手風琴代碼的上下文。

$(document).ready(function() {
  $(".accordion").on("click", ".accordion-header", function() {
    $(".accordion-content").toggleClass("active");
  });
});

我在此片段中沒有任何滑動，但希望這可以使您的單擊與顯示/隱藏手風琴內容的CSS更改相關。