更改图标，而不是全部

Question

我设法做好每件事，打开每个元素。正如您在下面的示例中所看到的，所有图标一起更改，但是只更换了所点击的内容？

$('.list-prod > li > span').on('click', function() {
    $(this).next().slideToggle('slow', function() {
        if($(this).is(':visible')) {
            $('.list-prod > li > span').addClass('collapse');
        } else {
            $('.list-prod > li > span').removeClass('collapse');
        }
    });
});

External link demo

Answer 1

<强> JSFIDDLE DEMO

$('.list-prod > li > span').on('click', function () {
    $(this).toggleClass('expand collapse');
    $(this).next().slideToggle('slow');
});

Answer 2

这里应该写什么

$('.list-prod > li > span').on('click', function () {
    $(this).next().slideToggle('slow', function () {
        $(this).prev().toggleClass('collapse');
    });
});

因为回调函数中的this引用了折叠/可见div