Как я могу нацелить каждый узел с OOP (js)? - PullRequest
Новая
       11

Как я могу нацелить каждый узел с OOP (js)?

0 голосов
/ 23 февраля 2020

У меня есть базовый c аккордеонный компонент. Разметка выглядит следующим образом: 

<ul data-accordion>
  <li data-accordion-item>
    <button data-accordion-item-btn>{{ row.heading }}</button>
    <div class="h-0 overflow-hidden" data-accordion-item-target>{{ row.text }}</div>
  </li>
  <li data-accordion-item>
    <button data-accordion-item-btn>{{ row.heading }}</button>
    <div class="h-0 overflow-hidden" data-accordion-item-target>{{ row.text }}</div>
  </li>
</ul>

Теперь я пытаюсь сделать каждый элемент аккордеона «переключаемым» с помощью OOP (я новичок ie). Я пробовал этот код, но он влияет на каждый элемент аккордеона, когда я нажимаю на него: 

import $ from 'jquery';

const accordion = {
  init: () => {
    function toggleContent(node) {
      this.node = node;
      this.target = $(this.node).find('[data-accordion-item-target]');
      this.isOpen = false;
      this.toggle = this.toggle.bind(this);
      window.addEventListener('click', this.toggle);
      window.addEventListener('keypress', this.toggle);
    }

    toggleContent.prototype.toggle = function() {
      if (this.isOpen) {
        this.isOpen = false;
        this.target.css('height', 'auto');
      } else {
        this.isOpen = true;
        this.target.css('height', 0);
      }
    };

    $('[data-accordion-item]').each(function() {
      new toggleContent($(this));
    });
  },
};

export default accordion;

Может кто-нибудь подсказать, что я делаю неправильно и как я могу улучшить этот код? Я, конечно, хочу, чтобы элемент переключался как при нажатии, так и при вводе.

...