J'ai du JavaScript simple qui écoute les clics, et lorsque vous cliquez dessus, quatre choses se produisent :
Lorsqu'un autre bouton est cliqué, l'inverse se produit avec le premier bouton cliqué, la classe ajoutée est supprimée, l'attribut "aria-expanded" est réinitialisé à "false" et le div est à nouveau masqué (à nouveau défini sur CSS) et le " Après », le texte devient « Lire la suite ».
Cependant, si vous cliquez une deuxième fois sur le même bouton, alors que la classe ajoutée est supprimée comme prévu et que le div est à nouveau masqué, l'attribut "aria-expanded" n'est pas réinitialisé à "false". Quelqu'un peut-il m'expliquer pourquoi et me dire ce que je dois faire ? (Pas de jQuery, merci).
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>
J'ai vu des requêtes similaires, mais pas exactement les mêmes ou très anciennes, ou elles utilisent jQuery.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Cliquer sur un bouton définira uniquement la propriété
aria-expandedde tous les autres boutons sur false. Vous devez également basculer l'état actuel du bouton :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'); }); });