$(function () {
    $('.user_guide_tree ul ul').find('ul').hide();
    change_class_right($('.user_guide_tree ul ul').find('i'));
    $('span.active').parents('ul').show();
    change_class_down($('span.active').parents('ul').parent().find('i:first'));
    $('body').on('click', '.user_guide_tree .fa', function () {
        var li = $(this);
        if (li.hasClass('fa-angle-down')) {
            change_class_right(li);
        } else {
            change_class_down(li);
        }
        li.parent().find('ul:first').toggle();
    });
});

function change_class_right(el) {
    el.removeClass('fa-angle-down');
    el.addClass('fa-angle-right');
}
function change_class_down(el) {
    el.removeClass('fa-angle-right');
    el.addClass('fa-angle-down');
}