如果菜单关闭，子菜单的减号不会切换回加号

Question

我有以下jQuery菜单，也可以在JSfiddle here中找到：

$(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');
      } 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>

上面的代码提供以下功能：

a）当submenus关闭/打开时，正号/负号会更改。
b）当用户单击按钮1.0 Main Menu时，包括所有子菜单的整个菜单都关闭了
c）用户单击屏幕上的某个位置时，包括所有sumbenus的整个菜单都关闭了

所有这些都已经完美地工作了。

---

现在，当您执行以下步骤时：

第1步）打开所有菜单。
步骤2）关闭1.2子菜单
步骤3）再次打开1.2子菜单

1.2.2 Sub Menu将被关闭，但是minus sign将保留并且不会切换回plus sign。

您是否知道我需要在代码中进行哪些更改才能使其正常工作？

Answer 1

只需在下面的行之后添加$(this).next().find('li').removeClass('active');行，就可以完成...

$(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>