簡略化されたアクティブステート

Question

私は、方法の好みになると信じている質問があります。次のコードで

のdiv親要素がクリックされたときに、div要素自体が膨張しても、私はそれだけでクラスを追加したり変更したかを簡単に考えていたアイコンがアニメーション

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

をトリガーアイコンの状態を試して、別のクリックイベントをアイコンに追加してクリックしてアニメーション化し、divの親要素をアクティブにしたいと考えました。基本的には上記の逆です。

私はそれが

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

の効果にif文に別の条件を追加するのと同じくらい簡単だろうと思った。しかし、これは動作しませんし、私はそれが正しい形式ではありません知っています。誰かが私を始めて私がこれを理解することができるだろうか？

Answer 1

Element.classListは、少し簡単にすることができるtoggleメソッドを持っています。特定のクラスが存在するかどうかを確認する場合は、classList.containsを使用することもできます。

あなたの要素のheightを使用して現在の状態を判断しないことをお勧めします。あなたはactive cssクラスを使って高さを変えてみませんか？

あなたのクリックハンドラは、その後、次のようになります。

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

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

あなたがここにclassList詳細を読むことができます：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList