javascript - 为什么我的下拉 Accordion 不起作用？

Question

试图让一个简单的下拉式 Accordion 起作用，但不确定为什么单击时它不下拉。希望在切换时让“全部折叠”按钮切换到“打开”(但不是绝对必要)。也接受纯 css Accordion 的想法。 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 的情况下获得类似于 Accordion 的东西。

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

然后，当您单击标题时，它会自行展开。不需要js

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