javascript - 展开折叠问题

Question

我正在尝试在展开列表时将字体很棒的“+”图标更改为“-”图标，任何人都可以帮助我。

jQuery:

var $ul = $('ul');
$ul.find('li[Catparent-id]').each(function() {
  $ul.find('li[Catparent-id=' + $(this).attr('Catli-id') + ']').wrapAll('<ul />').parent().appendTo(this)
});

var $expandBtns = $('.expandBtn');
var $span;

//counting childs 

$expandBtns.each(function() {
  $span = $(this).find('span#count');
  var $subList = $(this).siblings('ul').find('li')
  if ($subList.length > 0) {
    $span.append(' ' + $subList.length);
  } else {
    $span.css('display', 'none');
  }
});

//Collapse and Expand
$('#orgCat ul').hide('li');
$expandBtns.on('click', function() {
  var $subList = $(this).siblings('ul');
  $(this).parent('li').siblings('li').find('ul').hide('slow');
  if ($subList.is(':visible')) {
    $subList.hide('slow');
  } else {
    $subList.show('slow');
  }
});

对于 HTML 和 CSS JSFIDDLE

Answer 1

这就是你想要的

var plusClass = "fa-plus-circle";
var minusClass = "fa-minus-circle";
//Collapse and Expand
$('#orgCat ul').hide('li');
$expandBtns.on('click', function() {
    var $subList = $(this).siblings('ul');
    $(this).parent('li').siblings('li').find('ul').hide('slow');       
    //reset icons since you close other children 
    $(this).parent('li').siblings('li').find('i').
        removeClass(minusClass).addClass(plusClass);
    if ($subList.is(':visible')) {
        $subList.hide('slow');
        $(this).find("i:first").addClass(plusClass).removeClass(minusClass);
        $(this).removeClass("blue");
    } else {
        $subList.show('slow');
        $(this).find("i:first").removeClass(plusClass).addClass(minusClass);
        $(this).addClass("blue");
   }
});

fiddle ==> https://jsfiddle.net/8aaq0j4c/2/

摆弄颜色变化 ==> https://jsfiddle.net/8aaq0j4c/3/