javascript - 为什么我的下拉手风琴不起作用?
问题描述
试图让一个简单的下拉手风琴工作,但不知道为什么点击时它不下拉。想要在切换时让“全部折叠”按钮切换到“打开”(但不是绝对必要的)。也对纯 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();
});
解决方案
通过使用 html 元素,您可以在不使用 javascript 的情况下获得类似于手风琴的东西details
。
<details>
<summary>Title</summary>
Some text
</details>
然后,当您单击标题时,它会自行展开。不需要js
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
推荐阅读
- openai-gym - action_space 是干什么用的?
- c# - 我有 265,467 行和 500 列数据。用户应该能够使用 angular 和 c# 以 excel 格式下载这些数据
- mysql - 查询同一日期之间的数据
- node.js - 在 Angular 页面上使用不同的服务器
- python - h5py.File 函数为 mpi4py 抛出 NameError
- spring - 覆盖 Spring Data REST 中的相关链接
- sql-server - 您可以使用 JDBC 创建从 SQL Server 到 DB2 的链接服务器吗?
- java - 从使用反射获得的 RecyclerView 调用方法
- wso2 - 有没有办法在 WSO2 身份服务器中加密用户名?
- excel - VBA:SaveCopyAs 不是密码保护