激活时更改 SVG 图标

Question

我对这个jQuery-Thing很陌生，所以很抱歉提前提出了可能的转储问题。我已经搜索过了，但找不到有关我特定问题的任何帮助。

所以。我试着碰碰我的菜单图标（汉堡包，流行的东西，你知道的）当激活到一个关闭图标时。我发现这个：http://css-tricks.com/swapping-svg-icons/

 $(".expand-link")
            .on("click", function() {
                $(this).find("use").attr("xlink:href", "#closeicon");
            })
            .on("mouseleave", function() {
                $(this).find("use").attr("xlink:href", "#menuicon");
            });

现在，我想要的是，在第一次单击菜单图标时，它会更改为关闭图标。第二次单击时，在图标或其他地方，它将关闭图标更改回菜单图标。

使用两次"点击"事件不起作用，我尝试了不同的鼠标事件，但它们都没有帮助。

Answer 1

请发布小提琴。

.find（"use"） => 你确定有吗？如果要按类选择，请使用".find（'.use'）"

顺便说一句 - 您可以通过以下方式查看吸引力

.on('click', function() {
    if($(this).find("use").attr("xlink:href") === '#closeicon') {
       // do this
    } else {
        // do that
    }
 });

Answer 2

创建一个

标志变量并在每次单击时更改其状态，以便您知道要设置哪个URL。 例如

flag = true
$(".expand-link")
            .on("click", function() {
                if (flag)
                $(this).find("use").attr("xlink:href", "#closeicon");
                else
                $(this).find("use").attr("xlink:href", "#menuicon");
                flag = !flag;
           });

例如这个