激活时更改 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')”

顺便说一句 - 你可以检查 attr by

.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;
           });

例如this