Question

我对这个jQuery-Thing很新，很抱歉提前转发问题。我已经搜索了，但无法找到有关我特定问题的任何帮助。

因此。我想尝试一下我的menuicon（hamburgericon，流行的东西，你知道）活跃到一个关闭图标。我发现了这个：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");
            });

现在，我想要的是，在第一次点击Menuicon时，它会变为Close-Icon。在第二次单击时，在图标或其他位置，它会将closeicon更改回menuicon。

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

Answer 1

创建一个标志变量并在每次单击时更改其状态，以便您知道要设置的URL。 E.g。

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

E.g。 this

Answer 2

请发一个小提琴。

.find（＆＃34;使用＆＃34;）=＆gt;你确定有＆lt; use＆gt;＆lt; / use＆gt ;?如果您想按班级选择，请使用＆＃34; .find（＆＃39; .use＆＃39;）＆＃34;

btw - 您可以通过

查看attr

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

激活时更改SVG图标

2 个答案: