当单击另一个选项卡时关闭的手风琴

Question

我想我可能已经关注这个问题太久了，错过了一些简单的东西。我可以创建一个手风琴，在点击时打开和关闭每个选项卡。但是，当我试图修改代码，使每个选项卡在单击另一个选项卡时自动关闭时，您单击的选项卡在单击后将不再关闭。我已经把代码缩短了一点，稍后会调整咏叹调标签，但为什么点击标签时不关闭呢？活动类未被删除。

JSFiddle在这里：https://jsfiddle.net/huz08qts/6/

document.addEventListener("DOMContentLoaded", () => {
const toggleClasses = (a) => {
let collapser = a.querySelector(".accordion-collapser");
let panel = a.querySelector(".accordion-panel");
let title = a.querySelector(".accordion-title");
document.querySelectorAll(".active").forEach(e => e.classList.remove("active"))

if(panel.classList.contains("active")) {
panel.classList.remove("active");
} else {
panel.classList.add("active");
}
// title.classList.add("active");
}
document.querySelectorAll(".accordion").forEach((a) => {
a.addEventListener("click", () => toggleClasses(a), false)

});
})

html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.accordion-icon {
height: 50px;
width: 50px;
margin-left: 10px;
}
.accordion-group {
margin-bottom: 21px;
}
.accordion-heading {
padding: 0;
margin: 0;
border: 1px solid #cccccc;
border-top: 0px;
border-bottom: 0px;
position: relative;
display: flex;
align-items: center;
}
.accordion-heading:focus-within {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
outline-style: dotted;
outline-width: 2px;
}
.accordion-group .accordion-heading:first-child {
border-top: 1px solid #cccccc;
}
.accordion-group .accordion:last-child .accordion-heading {
border-bottom: 1px solid #cccccc;
}
.accordion-group .accordion:last-child .accordion-panel {
border-top: 0;
}
.accordion-title {
color: #363c3e;
line-height: 1.3em;
font-weight: 600;
font-size: 18px;
}
.accordion-heading a {
position: relative;
}
.accordion-title:hover {
color: #00a950;
cursor: pointer;
}
.accordion-heading:hover {
cursor: pointer;
}
.accordion-heading h3:after {
content: " ";
background: url("https://i.postimg.cc/13fCTwcc/collapse-icon.png");
position: absolute;
top: 50%;
right: 15px;
width: 37px;
height: 37px;
transform: translateY(-50%) rotate(0);
transition: transform 0.3s, -webkit-transform 0.3s;
}
.accordion-heading h3.active:after {
transform: translateY(-50%) rotate(-45deg);
}
.accordion-collapser {
display: inline-block;
color: #363c3e;
padding: 10px 55px 10px 15px;
text-decoration: none;
}
.accordion-collapser:focus {
outline: 0px;
}
.accordion-collapser:hover {
color: #00a950;
text-decoration: none;
}
.accordion-panel {
background: #fbfbfb;
line-height: 1.42;
font-size: 16px;
display: none;
padding: 15px 55px 15px 25px;
height: 0px;
max-height: 0px;
transition: max-height 0.5s ease-out;
}
.accordion-group .accordion:last-child .accordion-panel {
border-bottom: 1px solid #cccccc;
}
.accordion-panel.active {
border: 1px solid #cccccc;
border-bottom: 0px;
display: block;
/* This will need to be adjusted accordingly once you know the avg elem size */
/* For transition use only  */
max-height: 800px;
height: auto;
overflow: hidden;
}
@media (max-width: 500px) {
.accordion-heading h3 > a {
font-size: 16px;
}
.accordion-panel {
font-size: 15px;
}
}

<section class="container">
<div class="accordion-group" role="tablist" aria-multiselectable="true" id="accordion-mortgage">
<div class="accordion">
<div class="accordion-heading" role="tab">
<img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
<h3 class="accordion-title">
<a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
</h3>
</div>
<div class="accordion-panel" role="tabpanel" aria-expanded="false">
<div class="accordion-body">I am the accordion's body content!</div>
</div>
</div>
<div class="accordion">
<div class="accordion-heading" role="tab">
<img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
<h3 class="accordion-title">
<a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
</h3>
</div>
<div class="accordion-panel" role="tabpanel" aria-expanded="false">
<div class="accordion-body">
<p>
I am the accordion's body content! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
<p>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</section>

Answer 1

我对您的代码进行了以下更改，现在它运行良好

1. 添加了一个布尔标志，用于保存点击手风琴的状态(在关闭所有内容之前(
2. 使用此标志设置手风琴的状态(在所有东西关闭后(

let isActive= panel.classList.contains("active");
document.querySelectorAll(".active").forEach(e => e.classList.remove("active"))

if(!isActive) {
panel.classList.add("active");
}

JS Fiddle：https://jsfiddle.net/aadeshk/Lb04v7qe/

Answer 2

由于要删除所有active类，因此除非首先记住状态，否则无法真正切换它们。

document.addEventListener("DOMContentLoaded", () => {
const toggleClasses = (a) => {
let collapser = a.querySelector(".accordion-collapser");
let panel = a.querySelector(".accordion-panel");
let title = a.querySelector(".accordion-title");
var flag = panel.classList.contains("active")
document.querySelectorAll(".active").forEach(e => e.classList.remove("active"))
if (flag) {
panel.classList.remove("active");
} else {
panel.classList.add("active");
}
// title.classList.add("active");
}
document.querySelectorAll(".accordion").forEach((a) => {
a.addEventListener("click", () => toggleClasses(a), false)
});
})

html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.accordion-icon {
height: 50px;
width: 50px;
margin-left: 10px;
}
.accordion-group {
margin-bottom: 21px;
}
.accordion-heading {
padding: 0;
margin: 0;
border: 1px solid #cccccc;
border-top: 0px;
border-bottom: 0px;
position: relative;
display: flex;
align-items: center;
}
.accordion-heading:focus-within {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
outline-style: dotted;
outline-width: 2px;
}
.accordion-group .accordion-heading:first-child {
border-top: 1px solid #cccccc;
}
.accordion-group .accordion:last-child .accordion-heading {
border-bottom: 1px solid #cccccc;
}
.accordion-group .accordion:last-child .accordion-panel {
border-top: 0;
}
.accordion-title {
color: #363c3e;
line-height: 1.3em;
font-weight: 600;
font-size: 18px;
}
.accordion-heading a {
position: relative;
}
.accordion-title:hover {
color: #00a950;
cursor: pointer;
}
.accordion-heading:hover {
cursor: pointer;
}
.accordion-heading h3:after {
content: " ";
background: url("https://i.postimg.cc/13fCTwcc/collapse-icon.png");
position: absolute;
top: 50%;
right: 15px;
width: 37px;
height: 37px;
transform: translateY(-50%) rotate(0);
transition: transform 0.3s, -webkit-transform 0.3s;
}
.accordion-heading h3.active:after {
transform: translateY(-50%) rotate(-45deg);
}
.accordion-collapser {
display: inline-block;
color: #363c3e;
padding: 10px 55px 10px 15px;
text-decoration: none;
}
.accordion-collapser:focus {
outline: 0px;
}
.accordion-collapser:hover {
color: #00a950;
text-decoration: none;
}
.accordion-panel {
background: #fbfbfb;
line-height: 1.42;
font-size: 16px;
display: none;
padding: 15px 55px 15px 25px;
height: 0px;
max-height: 0px;
transition: max-height 0.5s ease-out;
}
.accordion-group .accordion:last-child .accordion-panel {
border-bottom: 1px solid #cccccc;
}
.accordion-panel.active {
border: 1px solid #cccccc;
border-bottom: 0px;
display: block;
/* This will need to be adjusted accordingly once you know the avg elem size */
/* For transition use only  */
max-height: 800px;
height: auto;
overflow: hidden;
}
@media (max-width: 500px) {
.accordion-heading h3>a {
font-size: 16px;
}
.accordion-panel {
font-size: 15px;
}
}

<section class="container">
<div class="accordion-group" role="tablist" aria-multiselectable="true" id="accordion-mortgage">
<div class="accordion">
<div class="accordion-heading" role="tab">
<img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
<h3 class="accordion-title">
<a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
</h3>
</div>
<div class="accordion-panel" role="tabpanel" aria-expanded="false">
<div class="accordion-body">I am the accordion's body content!</div>
</div>
</div>
<div class="accordion">
<div class="accordion-heading" role="tab">
<img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
<h3 class="accordion-title">
<a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
</h3>
</div>
<div class="accordion-panel" role="tabpanel" aria-expanded="false">
<div class="accordion-body">
<p>
I am the accordion's body content! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
<p>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</section>

Answer 3

1. 您需要使用closest到达父accordion，然后获得accordion-panel
2. 当您在当前面板上filter之后从其他panel中删除活动类时
3. 您可以使用classList.toggle而不是if/else条件

document.addEventListener("DOMContentLoaded", () => {
const toggleClasses = (a) => {
let collapser = a.querySelector(".accordion-collapser");
let panel = a.closest('.accordion').querySelector(".accordion-panel");
let title = a.closest('.accordion').querySelector(".accordion-title");
[...document.querySelectorAll(".active")].filter(i => i !== panel).forEach(e => e.classList.remove("active"))
panel.classList.toggle("active")
}
document.querySelectorAll(".accordion").forEach((a) => {
a.addEventListener("click", () => toggleClasses(a), false)

});
})

html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.accordion-icon {
height: 50px;
width: 50px;
margin-left: 10px;
}
.accordion-group {
margin-bottom: 21px;
}
.accordion-heading {
padding: 0;
margin: 0;
border: 1px solid #cccccc;
border-top: 0px;
border-bottom: 0px;
position: relative;
display: flex;
align-items: center;
}
.accordion-heading:focus-within {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
outline-style: dotted;
outline-width: 2px;
}
.accordion-group .accordion-heading:first-child {
border-top: 1px solid #cccccc;
}
.accordion-group .accordion:last-child .accordion-heading {
border-bottom: 1px solid #cccccc;
}
.accordion-group .accordion:last-child .accordion-panel {
border-top: 0;
}
.accordion-title {
color: #363c3e;
line-height: 1.3em;
font-weight: 600;
font-size: 18px;
}
.accordion-heading a {
position: relative;
}
.accordion-title:hover {
color: #00a950;
cursor: pointer;
}
.accordion-heading:hover {
cursor: pointer;
}
.accordion-heading h3:after {
content: " ";
background: url("https://i.postimg.cc/13fCTwcc/collapse-icon.png");
position: absolute;
top: 50%;
right: 15px;
width: 37px;
height: 37px;
transform: translateY(-50%) rotate(0);
transition: transform 0.3s, -webkit-transform 0.3s;
}
.accordion-heading h3.active:after {
transform: translateY(-50%) rotate(-45deg);
}
.accordion-collapser {
display: inline-block;
color: #363c3e;
padding: 10px 55px 10px 15px;
text-decoration: none;
}
.accordion-collapser:focus {
outline: 0px;
}
.accordion-collapser:hover {
color: #00a950;
text-decoration: none;
}
.accordion-panel {
background: #fbfbfb;
line-height: 1.42;
font-size: 16px;
display: none;
padding: 15px 55px 15px 25px;
height: 0px;
max-height: 0px;
transition: max-height 0.5s ease-out;
}
.accordion-group .accordion:last-child .accordion-panel {
border-bottom: 1px solid #cccccc;
}
.accordion-panel.active {
border: 1px solid #cccccc;
border-bottom: 0px;
display: block;
/* This will need to be adjusted accordingly once you know the avg elem size */
/* For transition use only  */
max-height: 800px;
height: auto;
overflow: hidden;
}
@media (max-width: 500px) {
.accordion-heading h3 > a {
font-size: 16px;
}
.accordion-panel {
font-size: 15px;
}
}

<section class="container">
<div class="accordion-group" role="tablist" aria-multiselectable="true" id="accordion-mortgage">
<div class="accordion">
<div class="accordion-heading" role="tab">
<img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
<h3 class="accordion-title">
<a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
</h3>
</div>
<div class="accordion-panel" role="tabpanel" aria-expanded="false">
<div class="accordion-body">I am the accordion's body content!</div>
</div>
</div>
<div class="accordion">
<div class="accordion-heading" role="tab">
<img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
<h3 class="accordion-title">
<a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
</h3>
</div>
<div class="accordion-panel" role="tabpanel" aria-expanded="false">
<div class="accordion-body">
<p>
I am the accordion's body content! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
<p>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</section>