Wie kann ich ein Element dazu bringen, seinen Eigenschaftswert zurückzusetzen, wenn auf es selbst und auf andere Schaltflächen geklickt wird?

Question

Ich habe einfaches JavaScript, das auf Klicks wartet, und wenn darauf geklickt wird, passieren vier Dinge:

1. Klasse „Formular öffnen“ zur Schaltfläche hinzugefügt
2. Das Attribut „aria-expanded“ ist auf „true“ gesetzt
3. Zuvor ausgeblendete Divs anzeigen.
4. Der „Nachher“-Text der Schaltfläche ändert sich in „Info schließen“ (Dies wird über CSS gesteuert, basierend darauf, ob die Schaltfläche die neue Klasse „form-opened“ enthält.)

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.

Answer 1

单击一个按钮只会将所有其他按钮的 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');
    });
});