为什么我的下拉手风琴不起作用？

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开始。这里重要的是，在你的点击功能中，this将引用被点击的元素。因此，当我阅读它时，您正在切换按钮本身上的活动类。

另外，我相信您打算使用document.ready()作为运行手风琴代码的上下文。

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

我没有在这个片段中滑动，但希望这会让你的点击连接到显示/隐藏手风琴内容的CSS更改。