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

Question

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

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

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

Answer 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");
})