Question

我有一个高度为0px的导航div，当我点击一个汉堡包图标时，我想要一个250px高度的类添加。我正在使用事件监听器来检测通过警报和工作进行测试的点击。然后使用ToggleClass()来添加类。

在开发者控制台中，我可以看到添加了类ebing但是div的高度没有变化，你还可以看到控制台中没有检测到/显示高度规则，即使有删除线。< / p>

以下是来自开发者控制台的相关信息的图片：https://gyazo.com/900f858cbfc41e9e8bfe00eb9fd8f1cb

styles.css的：

#responsiveNav {
    position: absolute;
    right: 0;
    width: 200px;
    height: 0px;
    text-align: center;
    background-color: rgba(28, 28, 27, 0.8);
    color: #009641;
    margin-top: 100px;
    overflow: hidden;
    z-index: 1500;
    transition: all 0.8s ease;
}

.mobNavHeight {
    height: 250px;
}

JS：

$(document).ready(function () {
    var hamburgerBtn = document.getElementById("hamburgerBtn");

//DISPLAY MOBILE NAVIGATION ON HAMBURGER CLICK
    function displayMobNav() {
        alert("working");
        $('#responsiveNav').toggleClass("mobNavHeight");
    }

//EVENT LISTENERS
    hamburgerBtn.addEventListener("click", displayMobNav);


}); //Doc Ready

Answer 1

这是一个CSS特异性问题。 id具有比class更高的特异性。请在CSS中使用它。

#responsiveNav.mobNavHeight {
    height: 250px;
}

但如果我是你，我首先不会使用id来通过CSS定位元素。仅使用id来定位javascript，但在CSS中只使用类似.responsiveNav的类，将所有#responsiveNav样式移动到该类，然后使用.mobNavHeight覆盖它。像这样。

<nav id="responsiveNav" class="responsiveNav">nav</nav>

.responsiveNav {
    position: absolute;
    right: 0;
    width: 200px;
    height: 0px;
    text-align: center;
    background-color: rgba(28, 28, 27, 0.8);
    color: #009641;
    margin-top: 100px;
    overflow: hidden;
    z-index: 1500;
    transition: all 0.8s ease;
}

.mobNavHeight {
    height: 250px;
}

类切换工作但规则没有生效？

1 个答案: