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

【问题标题】：SVG hamburger menu: how can I change its color every time I clicked it?SVG 汉堡菜单：每次单击时如何更改其颜色？
【发布时间】：2020-11-06 11:44:07
【问题描述】：

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

我有以下 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>

目前，当我点击它时，我可以通过运行以下函数来改变它的颜色：

enter code here

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

enter code here

再次单击后，我无法弄清楚如何恢复原始颜色（要清楚：第一次单击时，它会更改颜色并出现菜单，第二次单击时菜单消失但颜色保持不变）。

任何线索将不胜感激！

谢谢

【问题讨论】：

标签： laravel svg hamburger-menu

【解决方案1】：

嗯，过去 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");
        }
        });
        });

【讨论】：