展开折叠问题

Question

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

j查询：

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

小提琴==> https://jsfiddle.net/8aaq0j4c/2/

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