当jquery accordion处于活动/打开状态时替换内容/图标

当我的手风琴处于活动/打开状态时，我试图将+符号替换为-，但是我被卡住了。目前，我正试图用CSS和：after来实现它

如果你有更好的想法，请分享

HTML

JS

试试这个：

在CSS中有一个新类

$('#mobile-accordion-container .title').click(function(e){
    e.preventDefault();
    if($(this).hasClass('active')){
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }
    $(this).closest('li').find('.mobile-content').not(':animated').slideToggle();
});

.mobile-content { 
    display:none;
}
#mobile-accordion-container li {
    position:relative;
    list-style-type: none;
}
h2.title {
    font-size: 1.3em;
    font-weight: normal;
    margin: 0;
    padding: 15px;
    text-align: left;
    font-family: Georgia;
    display:block;
    cursor: pointer;
}
h2:after {
    content: "+";
    display: block;
    font-size: 1em;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#9d9999),color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,#9d9999,#363636);
    background: -moz-linear-gradient(top,#9d9999,#363636);
    background: -ms-linear-gradient(top,#9d9999,#363636);
    background: -o-linear-gradient(top,#9d9999,#363636);
    background: -webkit-gradient(linear,0 100%,0 0,from(#363636),to(#9d9999));
    color: #FFF;
    border: 0;
    border-radius: 50%;
    height: 15px;
    position: absolute;
    right: 15px;
    width: 15px;
    text-align: center;
    top: 15px;
    line-height: 12px;
}

$(document).ready(function(){
      $('#mobile-accordion-container .title').click(function(e){
            e.preventDefault();
            $(this).closest('li').find('.mobile-content').not(':animated').slideToggle();
            });
        });

$('#mobile-accordion-container .title').click(function(e){
    e.preventDefault();
    if($(this).hasClass('active')){
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }
    $(this).closest('li').find('.mobile-content').not(':animated').slideToggle();
});