点击切换以获得更好的表现方法

Question

$('.head').click(function(){
    $(".content").toggle();

    if($('.content').is(':visible')) {
        $('.head> img').attr('src', downIcon);
    }
    else {
        $('.head> img').attr('src', rightIcon);
    }
});

我认为这不是切换手风琴图标的最佳方式，因为有一点延迟。

有任何关于改善这种方法以改善表演方法的想法吗？

Answer 1

使用div元素并将background-image设置为您要使用的图标，而不是img元素。然后只需切换一个描述当前图标状态的额外类。

<强> HTML

<div class="head"><div class="icon"></div></div>

<强> CSS

.head > .icon {
    background-image: url('up-image.png');
}
.head > .icon.visible {
    background-image: url('down-image.png');
}

<强> JS

$('.head').click(function(){
    $(".content").toggle();
    if ($('.content').is(':visible')) {
        $('.head > .icon').addClass('visible');
    } else {
        $('.head > .icon').removeClass('visible');
    }
});