Vereinfachen von Active States

Question

Ich habe eine Frage, die, glaube ich, auf die Methodenpräferenz zurückgeht.

Im folgenden Code, wenn das div Elternelement angeklickt wird, wird die div selbst löst erweitert und auch ein Symbol Animation

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); 

ich darüber nachdachte, wie einfach es war einfach eine Klasse hinzufügen und ändern die Status des Symbols und ich wollte experimentieren und versuchen, das andere Klickereignis nur zum Symbol hinzuzufügen, um es auf einen Klick zu animieren und das Elternelement im div ebenfalls zu aktivieren. Grundsätzlich ist das Gegenteil der obigen.

Ich dachte, es so einfach wäre, eine andere Bedingung für die if-Anweisung auf die Wirkung von

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

wie das Hinzufügen Aber das funktioniert nicht und ich weiß, es ist nicht die richtige Form ist. Könnte jemand mich dazu bringen, damit ich es herausfinden könnte?

Answer 1

Element.classList hat eine toggle Methode, die die Dinge ein wenig einfacher machen könnte. Wenn Sie prüfen möchten, ob eine bestimmte Klasse vorhanden ist, können Sie auch classList.contains verwenden.

Ich würde vorschlagen, nicht die height Ihrer Elemente zu verwenden, um ihren aktuellen Zustand zu bestimmen. Warum ändern Sie nicht die Höhe mit einer active CSS-Klasse?

Ihr Click-Handler könnte dann sein:

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

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

Sie können hier mehr über classList lesen: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList