Laravel SVG汉堡菜单：如何在每次单击时更改其颜色？

我知道这是一个相当新的问题，但我自己无法找到解决办法

我有以下SVG汉堡菜单图标：

    <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>

在此处输入代码

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

我不知道再次单击后如何恢复原始颜色（要清楚：第一次单击时，它会更改颜色并显示菜单，第二次单击时，菜单消失，但颜色保持不变）

任何线索都将不胜感激

---

谢谢

好吧，过去关于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");
        }
        });
        });