요소 자체를 클릭하거나 다른 버튼을 클릭할 때 요소의 속성 값을 재설정하려면 어떻게 해야 합니까?

Question

클릭을 수신하고 클릭하면 네 가지 일이 발생하는 일반 JavaScript가 있습니다.

1. 버튼에 "Form Open" 클래스가 추가되었습니다
2. "aria-expanded" 속성은 "true"로 설정됩니다
3. 이전에 숨겨진 div를 표시합니다.
4. 버튼의 "이후" 텍스트가 "정보 닫기"로 변경됩니다. (이는 버튼에 새 클래스 "form-opened"가 포함되어 있는지 여부에 따라 CSS를 통해 제어됩니다.)

다른 버튼을 클릭하면 처음 클릭한 버튼과 반대 현상이 발생하고 추가된 클래스가 제거되며 "aria-expanded" 속성이 "false"로 재설정되고 div가 다시 숨겨지고(다시 CSS로 설정됨) " 이후" 텍스트가 "자세히 보기"로 되돌아갑니다.

그러나 추가된 클래스가 예상대로 제거되고 div가 다시 숨겨진 상태에서 동일한 버튼을 두 번째 클릭하면 "aria-expanded" 속성이 "false"로 재설정되지 않습니다. 누구든지 이유를 설명하고 내가 무엇을 해야 하는지 말해 줄 수 있습니까? (JQuery는 없습니다. 감사합니다).

으아악 으아악 으아악

유사한 쿼리를 본 적이 있지만 완전히 동일하지 않거나 아주 오래되지 않았거나 jQuery를 사용합니다.

Answer 1

버튼을 클릭하면 다른 모든 버튼의 aria-expanded 속성만 false로 설정됩니다. 또한 현재 버튼의 상태를 전환해야 합니다.

으아악