Merhabalar,

Ecmascript 6 ile dropdown yaptım. Ama .dropdown class'ına dropdown aktif olunca active class'ı vermem gerekiyor.

Nasıl yapabilirim?

class dropdown {

  constructor() {
    this.trigger = document.querySelectorAll('.dropdown [data-trigger]');
    this.target = document.querySelectorAll('.dropdown [data-dropdown]'); 
    this.init();
  }

  init() {
    for (let i = 0; i < this.trigger.length; i++) {
      this.handleClick(this.trigger[i]);
    }
  }

  handleClick(el) {
    el.addEventListener('click', (event) => {
      event.preventDefault();
      el.nextElementSibling.classList.toggle('active');
    });
    for (let i = 0; i < this.target.length; i++) {
      this.handleClose(this.target[i]);
    }
  }

  handleClose(el) {
    window.addEventListener('mouseup', (event) => {
      if (event.target != el && event.target.parentNode != el) {
        if (el.classList.contains('active')) {
          el.classList.remove('active');
        }
      }
    });
  }

}

window.addEventListener('load', () => {
  new dropdown();
}, false)

Html:

<div class="dropdown">
                    <a href="javascript:;" data-trigger="siralama" class="ProductHead-details-mobile-item dropdown-link">
                        <div class="ProductHead-details-mobile-item-icon">
                            <svg class="icon icon-sort">
                                <use xlink:href="#icon-sort"></use>
                            </svg>
                        </div>
                        <span class="ProductHead-details-mobile-item-text">Sıralama Ölçütü</span>
                    </a>
                    <div class="dropdown-menu" data-dropdown="siralama">
                        <a href="javascript:;" class="dropdown-menu-link">Fiyatı Artan</a>
                        <a href="javascript:;" class="dropdown-menu-link active">Fiyatı Azalan</a>
                        <a href="javascript:;" class="dropdown-menu-link">Yeni Gelenler</a>
                        <a href="javascript:;" class="dropdown-menu-link">Öne Çıkanlar</a>
                    </div>
                </div>