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

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