使用jquery .click函数单击第二次后如何删除CSS属性?

问题描述 投票:0回答:1

第一次单击后会添加CSS属性,但我需要它们在第二次单击后消失。我错过了什么?

我尝试用toggle()removeClass()做这件事,但我没经验丰富......

if ($(window).width() < 800) {
  $('.dropdown').hide();
  $('.fa-bars').click(function() {
    $("ul").css("background-color", "white");
    $('.dropdown').slideToggle();
  })
}
jquery css click background-color
1个回答
1
投票

你最好的选择是不要使用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");
})
© www.soinside.com 2019 - 2024. All rights reserved.