다른 세부 정보를 자동으로 닫습니다 🚧

이 포스트는 다른 태그가 열려있을 때 모든 <details> 태그를 닫는 것에 관한 것입니다.

MidDaymy new WordPress Theme에 대한 게시물을 작성 중이었고 간단한 FAQ 섹션을 포함하고 싶었지만 약간의 스타일로 이 때 <details> 태그가 떠올랐습니다.

그것은 아코디언과 유사한 접근하기 쉬운 멋진 요소입니다.

하나를 만드는 방법?

코드의 패턴을 따르십시오.

<details>
  <summary>Summary/Question about the content</summary>
  And here is the content, it could be anything, even code.
  The example is on the original post, can't include <details> here.
</details>

그러나 같은 페이지에서 둘 이상의<details> 태그를 사용할 때, 특히 태그가 차례로 있을 때 하나가 열리고 다른 하나를 열면 첫 번째 태그가 열린 상태로 유지된다는 것을 알 수 있습니다.
합당한 양의 콘텐츠와 함께 5개 이상이 차례로 있으면 많은 공간을 차지할 것이라고 상상해 보십시오.
예를 들어 이 유익한 펜을 볼 수 있습니다. Teaching the Details Element with ... Details Elements!

그렇다면 열린 것을 닫는 방법은 무엇입니까?

쉬운 !
다음 코드를 스크립트 파일이나 페이지 하단의 닫기 <script> 태그 앞에 있는 </body> 태그에 포함하기만 하면 됩니다.

/** Close others <details> tag */
const allDetails = document.querySelectorAll('details');

allDetails.forEach(details => {
    details.addEventListener('toggle', (e) => {
        if (details.open) {
            allDetails.forEach(details => {
                if (details != e.target && details.open) {
                    details.open = false;
                }
            });
        }
    });
});

분해하자!

먼저 모든 <details> 태그를 선택합니다.

const allDetails = document.querySelectorAll('details');

그리고 우리는 그것들을 반복합니다:

allDetails.forEach(details => {

그런 다음 상태가 open과 closed 사이에서 변경될 때마다 toggle 요소에서 사용하는 <details> 이벤트를 수신합니다.

details.addEventListener('toggle', (e) => {

이제 <details>가 open가 되기를 기다립니다.

if (details.open) {

우리는 모든 <details>에 대해 다시 한 번 반복하고 그들 중 누군가가 target 이벤트의 toggle가 아니고 open 였는지 확인합니다. 그렇다면 열린 상태를 제거하여 닫습니다.

allDetails.forEach(details => {
    if (details != e.target && details.open) {
        details.open = false;
    }
});

즉, <details> 요소가 열리면 open 속성을 갖습니다. 이제 다른 <details> 요소가 열려 있으면 이전 요소에서 open 속성을 제거하고 실제 대상 요소만 열린 상태로 둡니다.

이것이 유용하고 The Details disclosure element 사용을 시작하기를 바랍니다.

시아,
LebCit.