Ich habe einfaches JavaScript, das auf Klicks wartet, und wenn darauf geklickt wird, passieren vier Dinge:
Wenn auf eine andere Schaltfläche geklickt wird, geschieht das Gegenteil mit der zuerst angeklickten Schaltfläche, die hinzugefügte Klasse wird entfernt, das „aria-expanded“-Attribut wird auf „false“ zurückgesetzt und das div wird wieder ausgeblendet (wieder auf CSS gesetzt) und das „ Nachher wird der Text auf „Weiterlesen“ zurückgesetzt.
Wenn jedoch ein zweites Mal auf dieselbe Schaltfläche geklickt wird, während die hinzugefügte Klasse wie erwartet entfernt und das Div wieder ausgeblendet wird, wird das Attribut „aria-expanded“ nicht auf „false“ zurückgesetzt. Kann mir jemand erklären, warum und was ich tun soll? (Kein jQuery, danke).
const tips = Array.from(document.querySelectorAll('.toggle-button'));
tips.forEach((tip) => {
tip.addEventListener('click', () => {
tips
.filter((f) => f !== tip)
.forEach((f) => {
f.setAttribute('aria-expanded', false);
f.classList.remove('form-opened');
});
tip.setAttribute('aria-expanded', true);
tip.classList.contains('form-opened');
tip.classList.toggle('form-opened');
});
});
.toggle-button ~ .tips {
display: none;
}
button.toggle-button[aria-expanded="false"]:after {
content: "Read more";
}
.toggle-button.form-opened ~ .tips {
display: block;
margin-bottom: 16px;
}
button.toggle-button[aria-expanded="true"]:after {
content: "Close info";
cursor: pointer;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
<div class="toggle-box"> <label for="button-1" class="visually-hidden toggle-list">Open or Close info</label><button id="button-1" class="toggle-button" aria-expanded="false"></button> <div class="tips"> Here is some text that is to be revealed </div> </div> <div class="toggle-box"> <label for="button-2" class="visually-hidden toggle-list">Open or Close info</label><button id="button-2" class="toggle-button" aria-expanded="false"></button> <div class="tips"> Here is some text that is to be revealed </div> </div> <div class="toggle-box"> <label for="button-3" class="visually-hidden toggle-list">Open or Close info</label><button id="button-3" class="toggle-button" aria-expanded="false"></button> <div class="tips"> Here is some text that is to be revealed </div> </div>
Ich habe einige ähnliche Abfragen gesehen, aber nicht genau gleich oder sehr alt, oder sie verwenden jQuery.
单击一个按钮只会将所有其他按钮的
aria-expanded属性设置为 false。您还必须切换当前按钮的状态：const tips = Array.from(document.querySelectorAll('.toggle-button')); tips.forEach((tip) => { tip.addEventListener('click', () => { tips .filter((f) => f !== tip) .forEach((f) => { f.setAttribute('aria-expanded', false); f.classList.remove('form-opened'); }); // Toggle both aria-expanded attribute and form-opened class tip.setAttribute( "aria-expanded", tip.getAttribute("aria-expanded") == 'true' ? 'false' : 'true' ); tip.classList.toggle('form-opened'); }); });