ความตั้งใจคือการแสดงและการซ่อนองค์ประกอบในแอปพลิเคชันนั้นควบคุมโดยคลาสเดียว

แสดง/ซ่อนตัวเลือกชั้นเรียน

toggler- องค์ประกอบที่คลิก (ปุ่ม ลิงก์ div) หากคุณเพิ่มไอคอนให้กับปุ่ม ให้ตั้งค่าคุณสมบัติตัวชี้เหตุการณ์เป็นไม่มีสำหรับไอคอน

activeClass- เรากำหนดชื่อของคลาสที่จะกำหนดให้กับองค์ประกอบ (ปุ่ม) ที่มีผู้ฟังติดอยู่ (js-สลับ). หากไม่มีแอตทริบิวต์ที่กำหนด ค่าเริ่มต้นของคลาส "ใช้งานอยู่" จะถูกเพิ่มไปยังองค์ประกอบที่คลิก

showClass- ชื่อคลาสที่จะเพิ่มในองค์ประกอบที่เราต้องการแสดง ค่าเริ่มต้นคือ "แสดง" เราสามารถเปลี่ยนผ่านแอตทริบิวต์ข้อมูล

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);- ซ่อนองค์ประกอบทั้งหมดที่มีรหัสอยู่ในรายการ (โดยคลิกที่องค์ประกอบหนึ่ง คุณจะเปิดองค์ประกอบเป้าหมายและซ่อนองค์ประกอบที่เปิดไว้ก่อนหน้านี้ ตัวอย่างเช่น หีบเพลง)

openOnly- โดยคลิกที่องค์ประกอบที่มีแอตทริบิวต์นี้ เราจะเปิด div เป้าหมายทั้งหมด

ลอจิกสลับ — การตรวจสอบว่าองค์ประกอบเป้าหมายแสดงอยู่ในเพจแล้วหรือไม่ ถ้าเป็นเช่นนั้น ก่อนอื่นเราจะลบคลาสที่ใช้งานอยู่ออกจากองค์ประกอบทริกเกอร์ (ทั้งหมดที่สามารถเปิด div เป้าหมายได้) ต่อไป เราจะลบคลาสที่ใช้งานอยู่ออกจากองค์ประกอบการสลับ สุดท้าย เราซ่อนองค์ประกอบเป้าหมาย

หากองค์ประกอบเป้าหมายไม่แสดงบนเพจ เราจะเพิ่มคลาสที่ใช้งานอยู่ให้กับทั้งองค์ประกอบที่คลิกและองค์ประกอบเป้าหมาย

หน้าตัวอย่าง

ลิงค์:https://codesandbox.io/s/toggle-w1j03g

1. Accordion — องค์ประกอบทริกเกอร์มีผลสลับ (กล่องเป้าหมายเปิดและปิดส่วนอื่นหรือตัวมันเอง)
2. Modal — ปุ่มเปิด modal และปุ่มอื่นๆ ก็แค่ปิด ให้ความสนใจกับคลาสโมดอล ซึ่งจะตรวจสอบเฉพาะว่ามีการคลิกโอเวอร์เลย์หรือไม่ เพื่อปิดโมดอลในกรณีนั้น อย่างอื่นทำโดยคลาส Toggle
3. หลายเป้าหมาย — ปุ่มแรกและปุ่มที่สองทำหน้าที่เหมือนปุ่มสลับ และปุ่มสุดท้ายทำหน้าที่เหมือนปุ่มสลับสำหรับทั้งสองปุ่ม
4. เมนูแบบเลื่อนลง — สลับแบบเลื่อนลงอย่างง่าย
5. แท็บ — คล้ายกับหีบเพลงที่แสดง div เป้าหมายหนึ่งอันและใกล้กับอันอื่น
6. Offcanvas — ลิงก์และปุ่มเป็นทริกเกอร์สำหรับเอฟเฟกต์ off-canvas เปิดอย่างเดียว