Etkin Durumların Basitleştirilmişleştirilmesi

Question

Metot tercihine inanıyorum diye bir sorum var. div üst öğe tıklandığında aşağıdaki kodda

, kendisi de genişler ve div ben bir sınıf eklemek ve değiştirmek için sadece ne kadar kolay düşünüyordum

var slideSection6 = document.getElementById("manualsHandbooks").addEventListener("click", function() 
                       { 
    if (this.parentElement.style.height == "60px" || this.parentElement.style.height == "") 
    { 
     this.parentElement.style.height = "215px"; 
     document.getElementById("MAHB").classList.add("active"); 
    } 
    else 
    { 
     this.parentElement.style.height = "60px"; 
     document.getElementById("MAHB").classList.remove("active"); 
    } 

}, false); 

bir simge animasyonu tetikler simgesinin durumu ve denemek istedim ve bir tıklatmada canlandırma yapmak ve divdaki ana öğeyi etkinleştirmek için yalnızca simgeye başka bir tıklama olayı eklemeyi denemek istedim. Temel olarak yukarıdakilerin tersi.

Ben

|| document.getElementId("MAHB").classList.add=("active") == true 

etkisiyle eğer açıklamaya başka bir koşul eklemek kadar basit olurdu Ama bu işe yaramazsa ve bunu doğru şekilde olmadığını biliyorum sanıyordum. Birisi beni başlatabilir mi, ben bunu anlayabildim mi?

Answer 1

Element.classList, toggle yöntemiyle işlerinizi biraz kolaylaştırır. Belli bir sınıfın olup olmadığını kontrol etmek isterseniz, classList.contains'u da kullanabilirsiniz. Geçerli durumlarını belirlemek için öğelerinizin height kullanmamasını öneririm. Neden bir active css sınıfını kullanarak yüksekliği değiştirmiyorsunuz?

Tıklama işleyici sonra olabilir:

var button = document.getElementById("manualsHandbooks"); 

button.addEventListener("click", function() { 
    this.parentElement.classList.toggle("active"); 
    document.getElementById("MAHB").classList.toggle("active"); 
}, false); 

Burada classList hakkında daha fazla bilgi edinebilirsiniz: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList