Javascript 简化活动状态

我有一个问题，我相信归结到方法偏好

在下面的代码中，当单击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中激活父元素。基本上与上述相反

我认为这就像在if语句中添加另一个条件一样简单

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

---

但这不起作用，我知道这不是正确的形式。有人能帮我开始这样我就可以解决这个问题吗？

元素。classList

有一个

切换

方法，可以让事情变得更简单。如果要检查某个类是否存在，还可以使用

classList.contains

我建议不要使用元素的高度来确定它们的当前状态。为什么不使用

active

css类更改高度

然后，您的单击处理程序可以是：

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

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

---

您可以在此处阅读有关

classList

的更多信息：

无关，但IMO将业务逻辑嵌入元素的高度是一种非常粗略的方法。最坏的情况应该是基于类的，最好是将其完全排除在DOM之外。是

| document.getElementId（“MAHB”）.classList.indexOf（“active”）>-1

，这是您想要的吗？不，因为在第二次单击时脚本将无法运行，非常感谢！对JS来说非常新。喜欢它，但听上去可能会很沮丧（很好：）确保你学会使用浏览器的开发工具来感受正在发生的事情。您可以从控制台中尝试东西中学到很多东西。