의도는 응용 프로그램에서 요소의 표시 및 숨기기가 단일 클래스에 의해 제어된다는 것입니다.

수업 옵션 표시/숨기기

toggler- clicked 요소(버튼, 링크, div) 버튼에 아이콘을 추가하는 경우 아이콘에 대한 속성 pointer-events를 none으로 설정합니다.

activeClass- 리스너가 연결된 요소(버튼)에 할당될 클래스의 이름을 할당합니다. (js-토글). 지정된 속성이 없으면 클릭한 요소에 "활성" 클래스의 기본값이 추가됩니다.

showClass- 표시하려는 요소에 추가될 클래스 이름입니다. 기본값은 "표시"입니다. data 속성을 통해 변경할 수 있습니다.

targets- 표시하려는 요소 목록(id 속성은 필수)

closeElements- 닫고자 하는 특정 요소의 목록입니다. 탭, 아코디언...

논리 표시/숨기기

handler = () => {
    const closeOnly = this.toggler.hasAttribute("data-close-only");
    const openOnly = this.toggler.hasAttribute("data-open-only");

    if (closeOnly) {

      this.hide(this.targets);
      return;
    }

    this.hide(this.closeElements);

    if (openOnly) {
      this.targets.forEach((target) => this.addShowClass(target));
      this.addActiveClass(this.toggler);
      return;
    }



    // Toggle logic
    if (this.IsItShown()) {      


      this.targets.forEach((target: HTMLDivElement) => {
        const id = target.id;
        const toggler = document.querySelectorAll(
          `.js-toggle[data-target*=${id}]`
        );
        if (toggler.length) {
          toggler.forEach((button) =>
            this.removeActiveClass(button as HTMLElement)
          );
        }
      });

      this.removeActiveClass(this.toggler);

      if (this.targets) {
        this.targets.forEach((target) => this.removeShowClass(target));
      }
      return;
    }

    // Open/show elements
    this.addActiveClass(this.toggler);
    if (this.targets) {
      this.targets.forEach((target) => this.addShowClass(target));
    }
  };

this.hide(this.closeElements);- ID가 나열된 모든 요소 숨기기(하나의 요소를 클릭하면 대상 요소가 열리고 이전에 열린 요소는 숨겨집니다. 예: 아코디언)

openOnly- 이 속성이 있는 요소를 클릭하면 모든 대상 div가 열립니다.

Toggle logic — 대상 요소가 페이지에 이미 표시되어 있는지 확인합니다. 그렇다면 먼저 트리거 요소(대상 div를 열 가능성이 있는 모든 요소)에서 활성 클래스를 제거합니다. 다음으로 토글 요소 자체에서 활성 클래스를 제거합니다. 마지막으로 대상 요소를 숨깁니다.

대상 요소가 페이지에 표시되지 않으면 클릭한 요소와 대상 요소 모두에 활성 클래스를 추가합니다.

예제 페이지

링크:https://codesandbox.io/s/toggle-w1j03g

1. 아코디언 — 트리거 요소에는 토글 효과가 있습니다(대상 상자가 다른 상자 또는 자체적으로 열리고 닫힘).
2. 모달 — 버튼은 모달을 열고 다른 버튼은 닫습니다. 이 경우 모달을 닫으려면 오버레이가 클릭되었는지 확인하는 모달 클래스에 주의하십시오. 다른 모든 작업은 Toggle 클래스에서 수행합니다.
3. 다중 대상 — 첫 번째와 두 번째 버튼은 토글처럼 작동하고 마지막 버튼은 둘 다에 대해 토글처럼 작동합니다.
4. 드롭다운 — ​​간단한 드롭다운 토글
5. Tab — 아코디언과 유사하게 하나의 대상 div를 표시하고 다른 대상 div에 가깝습니다.
6. 오프캔버스 — 오프캔버스 열기 전용 효과의 트리거 역할을 하는 링크 및 버튼