第一次单击后会添加CSS属性,但我需要它们在第二次单击后消失。我错过了什么?
我尝试用toggle()
和removeClass()
做这件事,但我没经验丰富......
if ($(window).width() < 800) {
$('.dropdown').hide();
$('.fa-bars').click(function() {
$("ul").css("background-color", "white");
$('.dropdown').slideToggle();
})
}
你最好的选择是不要使用css
功能。相反,使用一个类,并切换它:
CSS:
.toggled {
background-color: white;
/* Perhaps add an animation here if you want the slide toggle look */
}
JavaScript的:
if ($(window).width() < 800) {
$('.dropdown').hide();
$('.fa-bars').click(function() {
$("ul").toggleClass("toggled"); // ***
})
}
整个JavaScript块可能更适合于隐藏屏幕宽度低于800的下拉列表的CSS media query,然后只是单击事件处理程序以显示它,即使屏幕宽度低于800。
CSS:
@media screen and (max-width: 799px) {
.dropdown:not(.show) {
display: none;
/* Perhaps add an animation here if you want the slide toggle look */
}
}
JavaScript的:
$('.fa-bars').click(function() {
$("ul").toggleClass("show");
})