Minus Sign Of Submenu Does Not Switch Back To A Plus Sign If Menu Is Closed

I have the following jQuery menu which you can also find in the JSfiddle here: The code above provides the following functionalities: a) Plus/Minus sign changes when submenus are

Solution 1:

Just add this line $(this).next().find('li').removeClass('active'); after below line and you're done...

$(this).hasClass("main_menu_01") ? $('.menu').removeClass('active') : $(this).removeClass('active');

$(document).ready(function () {
    $(".main_menu_01, .main_menu_02, .main_menu_03, .panel").on('click', function (e) {
    	e.stopPropagation();
      var $panel = $(this).next('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $(this).hasClass("main_menu_01") ? $('.menu').removeClass('active') : $(this).removeClass('active');
        $(this).next().find('li').removeClass('active');
      } else {
        $panel.slideDown(500);
        $(this).addClass('active');
      }
    });
    
    $("body").on('click', function () {
      var $panel = $('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $('main_menu_01').removeClass('active');
        $('.menu').removeClass('active');
      }
    });
});

.panel{ 
 width: 100%;
 padding-left: 0%;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.main_menu_01 {
 background: blue;
}

.main_menu_02 {
 background: lime;
}

.main_menu_03 {
 background: brown;
 padding-left: 10%;
}


.sub_menu_01{
 background: lime;
}

.sub_menu_02{
 background: lime;
 padding-left: 10%;
}

.sub_menu_03{
 background: orange;
 padding-left: 15%;
}


 .main_menu_01:before, .main_menu_02:before, .main_menu_03:before {
 content:'+';
 width:20px;
 display:inline-block;
}

.main_menu_01.active:before, .main_menu_02.active:before, .main_menu_03.active:before {
 content:'-';
}

.content {
  margin-top: 5%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><liclass="main_menu_01 menu"> 1.0 Main Menu </li><ulclass="panel"><liclass="sub_menu_01">&nbsp;&nbsp;&nbsp; 1.1 Sub Menu </li><liclass="main_menu_02 menu"> 1.2 Sub Menu </li><ulclass="panel"><liclass="sub_menu_02"><a>&nbsp;&nbsp;&nbsp; 1.2.1 Sub Menu </a></li><liclass="main_menu_03 menu"><a> 1.2.2 Sub Menu </a></li><ulclass="panel"><liclass="sub_menu_03"><a>&nbsp;&nbsp;&nbsp; 1.2.2.1 Sub Menu </a></li><liclass="sub_menu_03"><a>&nbsp;&nbsp;&nbsp; 1.2.2.2 Sub Menu </a></li></ul></ul></ul><divclass="content"><p>Content goes here</p></div>