Как получить начальное свойство элементов после выполнения задачи jQuery?

Question

У меня проблема с поворотом моей кнопки.Когда свойство меню переключается с {display:none} на {display:block} с помощью jQuery.Один раз он поворачивается на 180 градусов при переключении на блок, но при переключении обратно на ноль он остается прежним, поворачивается на 180 градусов.Я хочу вернуть его в исходное положение, когда {display: none}.
например:

$(document).ready(function() {
    $("button").click(function(){
        $("p").css({"color":"red"});
    })
});

Приведенная выше кнопка окрашивает элементы <p> в красный цвет;можно ли вернуть тот же исходный цвет назад с помощью той же кнопки?

Answer 1

Вы можете переключить значение цвета:

var pColor = $("p").css("color");
$("p").css({
  "color": (pColor == "red" ? "black" : "red")
});

В качестве альтернативы вы можете использовать флаг:

var switchBack = false;
$("button").click(function(){
  $("p").css({
    "color": (switchBack ? "red" : "black")
  });
  switchBack = !switchBack;
})

Answer 2

Вы можете использовать класс переключения:

 $(".red").click(function () {
   $(this).toggleClass("green");
});

см. демо

Answer 3

Да, получить цвет в переменной, например:

var color = $("button").css("color");

$(document).ready(function() {
    $("button").click(function(){
        var color = $("button").css("color");
        console.log(color);
        $("button").css({"color":"red"});
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="color:blue">click me</v>