Bagaimanakah saya boleh mendapatkan elemen untuk menetapkan semula nilai hartanya apabila ia sendiri diklik dan apabila butang lain diklik?

Question

Saya mempunyai beberapa JavaScript biasa yang mendengar klik, dan apabila diklik, empat perkara berlaku:

1. Kelas "Borang Terbuka" ditambahkan pada butang
2. Atribut "aria-expanded" ditetapkan kepada "true"
3. Tunjukkan div yang tersembunyi sebelum ini.
4. Teks "selepas" butang bertukar kepada "Tutup maklumat" (Ini dikawal melalui CSS berdasarkan sama ada butang itu mengandungi kelas baharu "dibuka borang".)

Apabila butang lain diklik, perkara sebaliknya berlaku pada butang pertama yang diklik, kelas tambahan akan dialih keluar, atribut "aria-expanded" ditetapkan semula kepada "false" dan div disembunyikan semula (set sekali lagi kepada CSS ) dan " Teks selepas" kembali kepada "Baca Lagi".

Walau bagaimanapun, jika butang yang sama diklik untuk kali kedua, manakala kelas tambahan dialih keluar seperti yang dijangkakan, dan div disembunyikan semula, atribut "aria-expanded" tidak ditetapkan semula kepada "false". Bolehkah sesiapa menjelaskan mengapa dan beritahu saya apa yang perlu saya lakukan? (Tiada jQuery, terima kasih).

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>

Saya telah melihat beberapa pertanyaan yang serupa, tetapi tidak betul-betul sama atau sangat lama, atau mereka menggunakan jQuery.

Answer 1

Mengklik butang hanya akan menetapkan sifat aria-expanded semua butang lain kepada palsu. Anda juga mesti menogol keadaan butang semasa:

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');
    });
});