v2.5.2
Giriş yap

Ecmascript 6 Dropdown

melihozdemir
258 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 3

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="nojavascript...;" 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="nojavascript...;" class="dropdown-menu-link">Fiyatı Artan</a>
                        <a href="nojavascript...;" class="dropdown-menu-link active">Fiyatı Azalan</a>
                        <a href="nojavascript...;" class="dropdown-menu-link">Yeni Gelenler</a>
                        <a href="nojavascript...;" class="dropdown-menu-link">Öne Çıkanlar</a>
                    </div>
                </div>
javascript
Cevap yaz
Cevaplar (3)
munzevi
912 gün önce

bir sınıf yazabiliyorsun ama, javascriptte bir css seçicisinin tanımlı olup olmadığını denetleyemiyor musun yani? enteresan.

tüm kodunu yorum satırı yap

el.nextElementSibling.classList.toggle('active');

bir olay dinleyicisi oluştur ve neye tıklandığında active eklenmesini istiyorsan bunu çalıştır. mantıken toggle yöntemi tetiklendiğinde tanımlanan değişikliği uygular, tekrar tetiklendiğinde yaptığı değişikliği geri alır ve bu döngü böyle gider. toggle parametre olarak belirtilen değeri sınıf olarak görür, yani tıkladığında o css class'ını elemente ekler ve tekrar tıkladığında kaldırır. ilk yazdığım mesajdaki koşula bile gerek yok aslında. senin kafan karışık veya sormak istediğin şeyi tam anlatamadın veya ben anlamadım.

0
#010167
melihozdemir
912 gün önce

Hiçbir şekilde jquery kullanmıyorum. Dediğinizi yaparsam jquery olmadan çalıştırabilir miyim?

0
#010166
munzevi
912 gün önce

hasClass adında jquery de mevcut olan methodu kullanabilirsin. bu method sınıfların adlarını kontrol etmek için kullanılır.

if($("#dropdown").hasClass(".active")){
    $("#dropdown").removeClass(".active");
}else{
    $("#dropdown").addClass(".active");
}

burada belirttiğimiz id de class mevcutsa kaldır, mevcut değilse ekle dedik. bunu clickten sonra kullanırsan istediğini elde etmiş olursun

0
#010163