类切换工作但规则不起作用？

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

在开发者控制台中，我可以看到添加的ebing类，但是div的高度没有变化，并且您还可以看到即使使用删除线，控制台中也未检测到/显示高度规则。

下面是从开发者控制台的培训相关信息的图像：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

来源

2017-04-23 Xander

这是一个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; 
}

来源

2017-04-23 14:57:08

Thanks @MichaelCoker now working。你的意思是ID有更高的特定性？因为它是被发现的身份证号码高度，而不是班级 – Xander

（会接受我的时间） – Xander

@EthanBristow对不起，意思是“更高”，更新。另外更新了另一个建议，只是为了不在通常的CSS中使用id，出于这个原因。 –

类切换工作但规则不起作用？

回答

相关问题