Mục đích là việc hiển thị và ẩn các phần tử trong ứng dụng được kiểm soát bởi một lớp duy nhất.

Hiện/ẩn tùy chọn lớp học

toggler- phần tử được nhấp (nút, liên kết, div) Nếu bạn thêm biểu tượng vào nút, hãy đặt thuộc tính pointer-events thành none cho biểu tượng.

activeClass- chúng tôi gán tên của lớp sẽ được gán cho phần tử (nút) có trình lắng nghe được gắn vào nó. (js-chuyển đổi). Nếu không có thuộc tính đã cho, giá trị mặc định của lớp "hoạt động" sẽ được thêm vào phần tử được nhấp.

showClass- một tên lớp sẽ được thêm vào phần tử chúng tôi muốn hiển thị. Giá trị mặc định là "hiển thị". Chúng ta có thể thay đổi nó thông qua thuộc tính data.

targets- Danh sách các phần tử muốn hiển thị (thuộc tính id là bắt buộc)

closeElements- Danh sách các yếu tố cụ thể mà chúng tôi muốn đóng. Tab, đàn accordion...

Hiển thị/ẩn logic

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);- Ẩn tất cả các phần tử có id được liệt kê (bằng cách nhấp vào một phần tử, bạn mở phần tử được nhắm mục tiêu và ẩn phần tử đã mở trước đó. Ví dụ: Accordion)

openOnly- bằng cách nhấp vào một phần tử có thuộc tính này, chúng tôi sẽ mở tất cả các div được nhắm mục tiêu

Chuyển đổi logic — Kiểm tra xem các thành phần mục tiêu đã được hiển thị trên trang chưa. Nếu đúng như vậy, trước tiên chúng tôi xóa lớp đang hoạt động khỏi các phần tử kích hoạt (tất cả những phần tử có khả năng mở div được nhắm mục tiêu). Tiếp theo, chúng tôi xóa lớp đang hoạt động khỏi chính phần tử chuyển đổi. Cuối cùng, chúng tôi ẩn các yếu tố mục tiêu.

Nếu các phần tử đích không được hiển thị trên trang, chúng tôi sẽ thêm lớp hoạt động cho cả phần tử được nhấp và các phần tử đích.

trang ví dụ

liên kết:https://codesandbox.io/s/toggle-w1j03g

1. Đàn accordion — phần tử kích hoạt có tác dụng chuyển đổi (hộp mục tiêu mở và đóng hộp khác hoặc chính nó)
2. Phương thức - nút mở phương thức và các nút khác chỉ đóng. Hãy chú ý đến lớp phương thức, lớp này chỉ kiểm tra xem lớp phủ có được nhấp hay không, để đóng phương thức trong trường hợp đó. Mọi thứ khác được thực hiện bởi lớp Toggle.
3. Nhiều mục tiêu — Nút thứ nhất và nút thứ hai hoạt động như chuyển đổi và nút cuối cùng hoạt động như chuyển đổi cho cả hai
4. Dropdown — chuyển đổi thả xuống đơn giản
5. Tab - tương tự như đàn accordion hiển thị một div đích và gần các div khác
6. Offcanvas — liên kết và nút làm trình kích hoạt cho hiệu ứng chỉ mở ngoài canvas