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中的元素也是如此。基本上与上述相反。

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

的效果一样简单

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

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

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

简化活跃国家

1 个答案: