Методы переключения классов и видимости элементов управления в JavaScript

Я могу помочь вам преобразовать данный фрагмент кода в стрелочную функцию. Вот конверсия:

const toggleClass = () => {
  $(this).toggleClass("open").next(".fold").toggleClass("open");
};

В этой стрелочной функции $(this)относится к текущему контексту и переключает класс «открыть» для элемента. Метод next(".fold")выбирает следующий родственный элемент с классом “fold” и также переключает для него класс “open”.

Что касается других методов достижения той же функциональности, вы можете использовать:

Метод

  1. classList.toggle():

    const toggleClass = () => {
    this.classList.toggle("open");
    const nextElement = this.nextElementSibling;
    if (nextElement && nextElement.classList.contains("fold")) {
    nextElement.classList.toggle("open");
    }
    };
  2. Ванильный JavaScript с jQuery:

    const toggleClass = () => {
    $(this).toggleClass("open");
    $(this).next(".fold").toggleClass("open");
    };
  3. Использование оператора расширения ES6:

    const toggleClass = () => {
    const elements = [...document.querySelectorAll(this)];
    elements.forEach((element) => {
    element.classList.toggle("open");
    const nextElement = element.nextElementSibling;
    if (nextElement && nextElement.classList.contains("fold")) {
      nextElement.classList.toggle("open");
    }
    });
    };