當您單擊自身以及單擊其他按鈕時，如何獲取元素以重新設定屬性值？

Question

我有一些普通的 JavaScript 可以監聽點擊，當點擊時，會發生四件事：

1. 「表單開啟」類別已新增至按鈕
2. “aria-expanded”屬性設定為“true”
3. 顯示之前隱藏的 div。
4. 按鈕的「after」文字變更為「Close info」（這是根據按鈕是否包含新類別「form-opened」透過 CSS 控制的。）

當點擊另一個按鈕時，第一次點擊的按鈕會發生相反的情況，新增的類別被刪除，“aria-expanded”屬性被重新設定為“false”，div 再次隱藏（再次設定為CSS）並且“之後”文字恢復為“閱讀更多”。

但是，如果第二次點擊同一個按鈕，同時新增的類別按預期刪除，並且 div 再次隱藏，「aria-expanded」屬性不會重新設定為「false」。誰能解釋一下原因並告訴我該做什麼？ （沒有 jQuery，謝謝）。

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>

我看過一些類似的查詢，但不完全相同或非常舊，或者它們使用 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');
    });
});