Блог

Я знаю, что это довольно сложный вопрос для новичков, но я не могу найти решение самостоятельно.

У меня есть следующий значок SVG hamburger-menu:

     <svg class="svg-menu" style="margin-top: 1.8rem;margin-right:0.5rem" viewBox="0 0 100 80" width="40" height="18" onclick='fill:red'>>
<rect id="r1" width="100" height="8"></rect>
<rect id="r2" y="30" width="100" height="8"></rect>
<rect id="r3" y="60" width="100" height="8"></rect>
</svg>
  

На данный момент я могу изменить его цвет при нажатии на него, выполнив следующую функцию:

enter code here

 $(function(){
          $(".svg-menu").on("click",function(){
          $("#r1,#r2,#r3").attr("fill","#C8C8C8");   
            });
    });
  

enter code here

Я не могу понять, как вернуть исходный цвет обратно после повторного нажатия на него (для ясности: при первом нажатии он меняет свой цвет и появляется меню, при втором нажатии меню исчезает, но цвет остается прежним).

Любая информация будет высоко оценена!

Спасибо

Ну, в прошлом был похожий вопрос о StackOverflow. Я сделал небольшое редактирование, кажется, оно работает таким образом:

     let clickNumbers = 0;
    $(function(){
$(".svg-menu").on("click",function(){
        clickNumbers  ;
        if(clickNumbers % 2 == 1){
    $("#r1,#r2,#r3").attr("fill","#C8C8C8");
        } else {
            $("#r1,#r2,#r3").attr("fill","#000");
        }
        });
        });