Как удалить свойство CSS после повторного нажатия с помощью функции jquery .click?

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, вероятно, лучше подходит для медиазапроса CSS , который скрывает раскрывающийся список на ширине экрана ниже 800, а затем просто обработчик события щелчка, чтобы показать его, даже если ширина экрана меньше 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");
})