jquery - 如果 div 可见，则切换图标

Question

如果toggle-project-stages在链接上如何将图标类从fa-chevron-down切换到fa-chevron-up > div 可见吗？

<强> jsFiddle

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function(e){
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);

    $(".toggle-project-stages").not(toggleDiv).slideUp(200);
});

Answer 1

您可以使用toggleClass()

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function (e) {
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);


    $(".toggle-project-stages").not(toggleDiv).slideUp(200);
    var $i = $('i', this).toggleClass('fa-chevron-down fa-chevron-up')
    $('.toggle-project-status-downArrow i').not($i).removeClass('fa-chevron-up').addClass('fa-chevron-down')
});

演示:Fiddle