0
Kayıt Ol

Javascript toggle metodu ile CSS class'ında geçiş sorunu

6

●

90

  • 01-12-2022, 21:06:18
    #1
    Dijitalturk
    Dijitalturk
    Aşağıdaki HTML kodunda "fa-arrow-circle-down" classını aşağıdaki javascript toggle metodu ile "fa-arrow-circle-up" şeklinde değiştirmeye çalışıyorum ancak çalışmıyor kod ekleniyor ancak eski class silinmediği için toggle işlemi olmuyor.
    <div class="kapsa">
      <h1>Akordiyon Menü Uygulaması</h1>
      <button type="button" class="akordiyon">
        <span>HTML</span>
        <i class="fas fa-arrow-circle-down"></i>
      </button>
      <div class="kutu">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
          possimus molestias veritatis, doloremque fugiat at eum, quisquam eaque
          esse molestiae, eligendi aliquid! Beatae quidem harum debitis aliquam
          fuga error minima.
        </p>
      </div>
      <button type="button" class="akordiyon">
        <span>CSS</span>
        <i class="fas fa-arrow-circle-down"></i>
      </button>
      <div class="kutu">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
          possimus molestias veritatis, doloremque fugiat at eum, quisquam eaque
          esse molestiae, eligendi aliquid! Beatae quidem harum debitis aliquam
          fuga error minima.
        </p>
      </div>
      <button type="button" class="akordiyon">
        <span>JAVASCRIPT</span>
        <i class="fas fa-arrow-circle-down"></i>
      </button>
      <div class="kutu">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
          possimus molestias veritatis, doloremque fugiat at eum, quisquam eaque
          esse molestiae, eligendi aliquid! Beatae quidem harum debitis aliquam
          fuga error minima.
        </p>
      </div>
    </div>
    Js kodları şu şekilde;
    var buton = document.getElementsByClassName("akordiyon");
var ok = document.getElementsByClassName("fa-arrow-circle-down");
for (var i = 0; i < buton.length; i++) {
  buton[i].onclick = function () {
    var panel = this.nextElementSibling;
    this.lastElementChild.classList.toggle("fa-arrow-circle-up");
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  };
}
    sorun ne olabilir ?
  • 01-12-2022, 21:16:02
    #2
    ahmtcn37
    ahmtcn37
    remove ile ` fa-arrow-circle-down ` bunu silip, add ile ` fa-arrow-circle-up ` bunu ekleyin öyle deneyin
  • 01-12-2022, 21:17:39
    #3
    Dijitalturk
    Dijitalturk
    ahmtcn37 adlı üyeden alıntı: mesajı görüntüle
    remove ile ` fa-arrow-circle-down ` bunu silip, add ile ` fa-arrow-circle-up ` bunu ekleyin öyle deneyin
    Bu şekilde oluyor ancak yanlız 1 kere oluyor, tekrar tekrar tıklandığında geçiş işleminin olmaması konusunda sorun yaşıyorum
  • 01-12-2022, 21:23:25
    #4
    ahmtcn37
    ahmtcn37
    her tıklamada kontrol et if ile ` fa-arrow-circle-down ` bu class varsa ` fa-arrow-circle-up ` bunu ekle, ` fa-arrow-circle-up ` class varsa ` fa-arrow-circle-down ` bunu ekle gibi
  • 01-12-2022, 21:25:49
    #5
    Dijitalturk
    Dijitalturk
    ahmtcn37 adlı üyeden alıntı: mesajı görüntüle
    her tıklamada kontrol et if ile ` fa-arrow-circle-down ` bu class varsa ` fa-arrow-circle-up ` bunu ekle, ` fa-arrow-circle-up ` class varsa ` fa-arrow-circle-down ` bunu ekle gibi
    Yukarıdaki js kodunun if'leri içine mi yazmalıyım hocam kodu? bir örnek atabilir misiniz nereye nasıl eklemeliyim?
  • 01-12-2022, 21:31:37
    #6
    ahmtcn37
    ahmtcn37
    Dijitalturk adlı üyeden alıntı: mesajı görüntüle
    Yukarıdaki js kodunun if'leri içine mi yazmalıyım hocam kodu? bir örnek atabilir misiniz nereye nasıl eklemeliyim? 
    if(this.lastElementChild.classList.contains('fa-arrow-circle-down')){
      div.classList.remove('fa-arrow-circle-down');
    div.classList.add('fa-arrow-circle-up')
  }else{
      div.classList.remove('fa-arrow-circle-up ');
    div.classList.add('fa-arrow-circle-down')
  }
    Bu şekilde dener misin
  • 02-12-2022, 23:56:34
    #7
    Dijitalturk
    Dijitalturk
    ahmtcn37 adlı üyeden alıntı: mesajı görüntüle 
    if(this.lastElementChild.classList.contains('fa-arrow-circle-down')){
      div.classList.remove('fa-arrow-circle-down');
    div.classList.add('fa-arrow-circle-up')
  }else{
      div.classList.remove('fa-arrow-circle-up ');
    div.classList.add('fa-arrow-circle-down')
  }
    Bu şekilde dener misin
    yukarıdaki şekilde de tam anlatmak istediğim şekilde çalışmadı contains sorgusuna veya operatörü ile up classını da ekleyince sorun çözüldü hocam yardımın için teşekkürler

    for (var i = 0; i < buton.length; i++) {
  buton[i].onclick = function () {
    var panel = this.nextElementSibling;
    // this.lastElementChild.classList.toggle("fa-arrow-circle-up");
    if (
      panel.style.maxHeight &&
      (this.lastElementChild.classList.contains("fa-arrow-circle-down") ||
        this.lastElementChild.classList.contains("fa-arrow-circle-up"))
    ) {
      panel.style.maxHeight = null;
      this.lastElementChild.classList.remove("fa-arrow-circle-up");
      this.lastElementChild.classList.add("fa-arrow-circle-down");
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      this.lastElementChild.classList.remove("fa-arrow-circle-down");
      this.lastElementChild.classList.add("fa-arrow-circle-up");
    }
  };
}